IE непрозрачность: зависать иногда? - PullRequest
0 голосов
/ 26 августа 2010

У меня очень странная проблема с непрозрачностью / парением в IE. Все работает в FF и Chrome.

Рассмотрим эту страницу:

<!DOCTYPE html>
<html>
    <head>
    <title></title>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#outer").css("opacity", .7);
        });
    </script>
    <style type="text/css">
        #outer
        {
            position: absolute;
            width:600px;
            background: #111;
            z-index:2;
            overflow: hidden;
        }
        #outer div
        {
            float: left;
        }
        ul
        {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        ul li 
        {
            width: auto;
            margin: 2px 4px 2px 4px;
            padding: 2px 4px 2px 4px;
            font-size: 11px;
            color: White;
        }
        ul li:hover
        {
            background: red;
            font-weight: 600;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="outer">
        <div id="one">
            <ul>
                <li>111</li>
                <li>222</li>
            </ul>
        </div>
        <div id="two">
            <ul>
                <li>333</li>
                <li>444</li>
            </ul>
        </div>
        <div id="three">
            <ul>
                <li>555</li>
                <li>666</li>
            </ul>
        </div>
    </div>
</body>
</html>

Вот проблема. При наведении курсора мышц время от времени - вы можете видеть или не видеть красный фон и изменение шрифта в IE (7 или 8). Вы всегда увидите изменение курсора. Если я уберу фон и шрифт, я все еще вижу изменение курсора. Но если фон или вес шрифта есть, курсор все равно изменится, но фон или шрифт могут или не могут.

Если непрозрачность НЕ установлена ​​на #outer, все работает везде. Опять же, FF и Chrome в порядке.

Что ты думаешь?

ОБНОВЛЕНИЕ: Это похоже на IE8. Когда IE8 находится в режиме совместимости (действует как IE7) все хорошо!

Но, включая этот тег в заголовке:

<meta id="metaIE8IE7" http-equiv="X-UA-Compatible" content="IE=7" />

НЕ исправляет это.

Ответы [ 3 ]

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

Была такая же проблема и нашел решение (хотя мое решение было для: hover, а не li: hover, и я не проверял)

В основном, убедитесь, что элемент 'has-layout'. Например, display: block и т. Д. Затем сбросьте прозрачность для этого элемента. -ms-фильтр: "";

1 голос
/ 15 февраля 2013

только что получил идеальную рабочую комбинацию:

display: block;
zoom: 1;
opacity:0.4; /*for ie9 and other browsers */
filter: alpha(opacity=40); /*for ie older browsers*/

Как сказал Боб, «has-layout» необходим для его работы, т. Е. 8. Здесь «display: block;»делает работу.

0 голосов
/ 26 августа 2010

Больше CSS-культов для меня!Я понятия не имею, но фокусирование IE8 в режиме IE7 решило проблему.Я был неправ об этом, не работающем в вопросе.Все еще хорош в других браузерах.

...