Непрозрачность 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.

Любые идеи?

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

Настройка этих (точно так же, как я написала) служила мне, когда мне это нужно:

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

Ответ 3

Вам нужно установить Opacity сначала для совместимых со стандартами браузеров, а затем в различные версии 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]-->

Если вы отделите трюки quirks, ваш сайт будет проверять только штраф.

Ответ 4

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

Ответ 5

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

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

Ответ 6

CSS

Я использовал CSS-Tricks следующее:

.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;
}

Компас

Однако лучшим решением является использование Миграция Opacity Compass, все, что вам нужно сделать, это @include opacity(0.1);, и он позаботится о любом кросс-браузере вопросы для вас. Здесь вы можете найти пример .

Ответ 7

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

И ЭТО РАБОТАЕТ для работы alpha в IE8, вам нужно использовать атрибут позиции для этого элемента, например

позиция: относительная или другая.

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

Ответ 8

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

Ответ 9

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

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

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

Ответ 10

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

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

Это отдельный полифиль, который не требует jQuery или других библиотек. Существует несколько небольших предостережений, которые он не использует для встроенных стилей, и для любых таблиц стилей, для которых требуется прозрачность polyfil'd, они должны придерживаться политики безопасности одного и того же происхождения.

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

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