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


Answers

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

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

Я использую 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.

Есть идеи?




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




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

Компас

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




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




Вы также можете добавить polyfil, чтобы включить использование прозрачности в 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>



Links