У меня очень странная проблема с непрозрачностью / парением в 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" />
НЕ исправляет это.