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

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

Это прекрасно работает в 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, и только с помощью т. е. на свои собственные. Я также пробовал использовать

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

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

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

какие идеи?

10 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, чтобы решить эту проблему.

FWIW,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 для этого элемента, например

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

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 или других библиотек. Есть несколько небольших моментов он не работает в он-лайн стилей и для любых таблиц стилей, что нужна прозрачность polyfil они должны придерживаться того же происхождения политики безопасности.

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

<!--[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