Прозрачность в CSS не работает в IE8

Я использую CSS для указания текста триггера для раздела слайдов jQuery: т. е. при наведении курсора на текст триггера курсор изменяется на указатель, а непрозрачность текста триггера уменьшается, чтобы указать, что текст имеет действие щелчка.

Это отлично работает в Firefox и Chrome, но в IE8 непрозрачность не меняется.

Я пробовал различные настройки CSS без каких-либо успехов.

для пример

HTML:

<h3 class="slidedownTrigger">This is the trigger text</h3>

CSS:

.slidedownTrigger
{
    cursor: pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha(opacity=75);
    -khtml-opacity: 0.75;
    -moz-opacity: 0.75;
    opacity: 0.75;
}

что останавливает IE, изменяя непрозрачность? Примечание. Я пробовал это на различных элементах, меняя порядок операторов CSS и просто используя IE самостоятельно. Я также пробовал использовать

-ms-filter: "alpha(opacity=75)";

но без успеха.

у меня закончились вещи, чтобы попытаться получить модификацию непрозрачности, работающую в IE8.

какие идеи?

142
css internet-explorer-8 opacity

10 ответов

Не знаю, применимо ли это к 8, но исторически IE не применяет несколько стилей к элементам, у которых нет "макета"."

см.:http://www.satzansatz.de/cssd/onhavinglayout.html

65

установка этих (точно так же, как я написал) послужила мне, когда мне это было нужно:

-moz-opacity: 0.70;
opacity:.70;
filter: alpha(opacity=70);
158

вам нужно установить непрозрачность сначала для браузеров, совместимых со стандартами, а затем для различных версий IE. См. Пример:

но этот код непрозрачности не работает в ie8

.slidedownTrigger
{
    cursor: pointer;
    opacity: .75; /* Standards Compliant Browsers */
    filter: alpha(opacity=75); /* IE 7 and Earlier */
    /* Next 2 lines IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
}

обратите внимание, что я устранил-moz, поскольку Firefox является браузером, совместимым со стандартами, и эта строка больше не нужна. Кроме того, - khtml обесценивается, поэтому я также исключил этот стиль.

кроме того, фильтры IE не будут проверять стандарты w3c, поэтому, если вы хотите свою страницу чтобы проверить, отделите таблицу стилей стандартов от таблицы стилей IE, используя оператор if IE, как показано ниже:

<!--[if IE]>
<link rel="stylesheet" type="text/css"  href="http://www.mysite.com/css/ie.css" />
<![endif]-->

Если вы отделите причуды ie, ваш сайт будет проверять просто отлично.

48

по-видимому, Альфа-прозрачность работает только на элементах уровня блока в IE 8. Установить дисплей: блок.

17

используя display: inline-block; работает на IE8 для решения этой проблемы.

чистки рядов, opacity: 0.75 работает во всех браузерах, совместимых со стандартами.

17

в CSS

я использовал следующее из модели CSS-уловок, которые:

.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}

компас

однако лучшим решением является использование непрозрачность компас mixin, все, что вам нужно сделать, это @include opacity(0.1); и он позаботится о любых проблемах кросс-браузера для вас. Вы можете найти пример здесь.

5

вот ответ для IE 8

и он работает для alpha, чтобы работать в IE8, вы должны использовать position atribute для этого элемента, такого как

положение:родственника или друга.

http://www.codingforums.com/showthread.php?p=923730

2

ни один из ответов выше не работал для меня, поэтому я просто дал моему тегу DIV прозрачное фоновое изображение, которое отлично работало для всех браузеров.

2

этот код работает

filter: alpha(opacity = 50); zoom:1;

вам нужно добавить свойство масштабирования для его работы:)

1

вы также можете добавить polyfil для включения собственного использования непрозрачности в IE6-8.

https://github.com/bladeSk/internet-explorer-opacity-polyfill

это автономный полифил, который не требует jQuery или других библиотек. Есть несколько небольших предостережений, что он не работает на встроенных стилях, и для любых таблиц стилей, которые нуждаются в непрозрачности, они должны придерживаться политики безопасности того же происхождения.

использование мертв просто

<!--[if lte IE 8]>
    <script src="jquery.ie-opacity-polyfill.js"></script>
<![endif]-->

<style>
    a.transparentLink { opacity: 0.5; }
</style>

<a class="transparentLink" href="#"> foo </a>
1