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


143

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

Любые идеи?


На этот связанный / дублирующий вопрос есть ваш ответ, я думаю. stackoverflow.com/questions/859000/opacity-in-web-pages
Джефф Мартин

Я видел этот вопрос - проблема в ответе: <br> <br> & nbsp; & nbsp; фильтр: альфа (непрозрачность = 50); / * Internet Explorer / <br> & nbsp; & nbsp; непрозрачность: 0,5; / fx, сафари, опера, хром * / <br> & nbsp; & nbsp; -MS-фильтр: "ProgID: DXImageTransform.Microsoft.Alpha (Непрозрачность = 50)"; / * IE8 * / <br> <br> не работает для меня (я просто попробовал еще раз, чтобы проверить дважды). Я применил его к h3, который был черным и жирным. В Firefox и Chrome настройка непрозрачности окрашивает заголовок в серый цвет, как и следовало ожидать, но в IE8 он остается черным.

упс - не осознавал, что вы не можете использовать HTML в комментариях - но я думаю, вы можете видеть то, что я пытаюсь сказать

если вы попробуете эти стили только для однотонного div, они работают? может быть, есть какой-то другой CSS, который конфликтует.
Джефф Мартин

Хороший. Да, когда я делаю простой div, задаю ему высоту, ширину и красный цвет фона, с этими настройками непрозрачности, это работает в IE8. Получается полупрозрачный. Я изо всех сил пытаюсь понять, в чем проблема. Я не изменяю непрозрачность чего-либо еще в таблице стилей, поэтому я не могу думать, что может противоречить этому только для IE.

Ответы:


65

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

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


9
IE не применяет несколько стилей к элементам, которые не имеют «макета».
Azeem.Butt

4
Большой! Спасибо. Это была проблема. Элементы, для которых я пытался настроить непрозрачность (например, h3), не имели «макета». Как только я дал им немного, непрозрачность сработала. Все, что я сделал, это добавил ширину: 100%; на h3. Спасибо, что указал мне правильное направление. Тем не менее, кажется безумным (если не ошибкой), что Internet Explorer делает это.

51
IE не применяет много стилей ко многим элементам.
Дэнвеллман

1
@danwellman, а затем он делает много других "забавных" вещей тоже. Ура.
dudewad

Интересно, что IE7 не нуждается в «макете». Я использую адаптивное фоновое изображение для элемента с нулевой высотой, и padding-bottom: 100%в IE8 непрозрачность не вступила в силу, пока я не установил явную высоту. IE7 в этом не нуждается.
Коут

158

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

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

6
Спасибо, я считаю, что "фильтр: альфа (непрозрачность = 70);" для IE <8. Тем не менее, он не работает (для меня) в IE8 (я только что проверил). Я полагаю, что -moz-opacity теперь практически не существует, и непрозрачность является стандартным способом ведения дел, поэтому, естественно, Microsoft не использовала этот способ (слишком легко).

15
Достаточно просто установить «непрозрачность» и «фильтр», как вы описали, чтобы заставить меня работать в FF4 и IE8. -moz-opacity не был необходим.
demoncodemonkey

1
@ Габриэль МакАдамс: фильтр: альфа (непрозрачность = 70); работал (но только в IE 8)
Poonam Bhatt

@ Габриэль Это сработало! У меня больше не будет проблем с непрозрачностью в IE 7/8!
MJCoder

1
Более конкретная информация: на самом деле это метод fadeIn, который удаляет прозрачность.
tmorell

49

Сначала необходимо установить 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]-->

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


3
Достаточно просто установить «непрозрачность» и «фильтр», как вы описали, чтобы заставить меня работать в FF4 и IE8. Раздел с надписью "/ * Следующие 2 строки IE8 * /" не был необходим.
demoncodemonkey

3
@demoncodemonkey: правильно. Все зависит от того, какую версию вы установили. Если вы хотите максимальной совместимости, я предлагаю их все.
Кевин Флорида

Правильно, но: «Чтобы гарантировать, что пользователи Internet Explorer 7 и 8 будут использовать фильтр, вы можете включить оба синтаксиса, перечисленные выше. Из-за особенностей нашего синтаксического анализатора необходимо сначала включить обновленный синтаксис перед старым синтаксисом. для правильной работы фильтра в представлении совместимости (это известная ошибка, которая будет исправлена ​​после окончательного выпуска IE8). Вот пример таблицы стилей CSS: "(source: link )
zrathen

@Kevin «Если вы хотите максимальной совместимости, я предлагаю их все». Ну, тогда вы не должны были удалять -moz-opacity, верно?
Жуткий

Кавычки не нужны для -ms-фильтра.
13

17

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


17

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

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


5

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

Компас

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



2

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


1

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

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

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


1

Вы также можете добавить полифил, чтобы включить использование собственной непрозрачности в 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>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.