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

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

143 голосов
/ 22 декабря 2009

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

Есть идеи?

Ответы [ 10 ]

158 голосов
/ 22 декабря 2009

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

-moz-opacity: 0.70;
opacity:.70;
filter: alpha(opacity=70);
65 голосов
/ 22 декабря 2009

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

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

49 голосов
/ 09 июня 2010

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

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

17 голосов
/ 05 сентября 2012

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

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

17 голосов
/ 07 апреля 2011

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

5 голосов
/ 16 февраля 2015

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

2 голосов
/ 24 апреля 2013

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

2 голосов
/ 22 февраля 2011

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

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

Положение: относительное или другое.

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

1 голос
/ 07 августа 2014

Вы также можете добавить полифиль, чтобы включить использование собственной непрозрачности в 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>
1 голос
/ 11 марта 2014

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

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

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

...