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

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.

Любые идеи?

Answer 1

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

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

Answer 2

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

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

Answer 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 таблицы стилей, используя, если заявление IE, как показано ниже:

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

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

Answer 4

вот ответ на IE 8

И это работает для альфа работать в IE8, вы должны использовать позицию atribute для этого элемента, как

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

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

Answer 5

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

Answer 6

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

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

Answer 7

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

Answer 8

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

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

Вы должны добавить трансфокатора свойство для его работы :)

Answer 9

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

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

Это является самостоятельным polyfil, который не требует 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> 

Answer 10

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