Непрозрачность в IE8 зависит от положения: относительный - PullRequest
Новая
       8

Непрозрачность в IE8 зависит от положения: относительный

2 голосов
/ 25 марта 2011

Я заметил, что в некоторых случаях элементы формы нельзя сделать прозрачными в IE8. Оказалось, что это зависит от позиции: относительный тег CSS. Приведенный ниже HTML-код демонстрирует проблему: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>title</title>

<style type="text/css">

.ie-opaque {
    zoom : 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
}

.relative {
    position: relative;
}

</style>


</head>
<body>

    <div class="ie-opaque">
        <form>
        <fieldset>
        <ol>
            <li class="relative">
                <label for="test">label</label>
                <input id="test"/>
            </li>
            <li class="relative">
                <button>push</button>
            </li>
            <li>
                <label for="test">label</label>
                <input id="test"/>
            </li>
            <li>
                <button>push</button>
            </li>
        </ol>
        </fieldset>
        </form>
    </div>

</body>
</html>

В IE8 пункты 3 и 4 прозрачны, 1 и 2 - нет. Есть идеи почему?

Ответы [ 2 ]

5 голосов
/ 07 ноября 2012

В Internet Explorer 7, 8, 9 нестатические дочерние элементы не наследуют непрозрачность родителя.

Обходные пути:

  • IE9: дать родителю не-static position.
  • IE8: пусть ребенок наследует стиль фильтра.
  • IE7: пусть дочерний объект наследует стиль фильтра и присваивает родителю нестатическую позицию.

Ссылка отсюда:

http://www.jacklmoore.com/notes/ie-opacity-inheritance

0 голосов
/ 05 июля 2011

Использование классов с "li" - плохая практика, так как они были разработаны для перечисления подобной информации с похожим внешним видом, я предполагаю, что MS решила игнорировать поддержку дочерних элементов с ie8, которые используют классы и идентификаторы, которые не должны.

Я бы предложил использовать псевдо-классы (эффекты не будут отображаться в браузерах <= IE8) или javascript, если вам нужно настроить таргетинг на определенные li. </p>

...