IE 不透明度：有时会悬停？
我在 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" />
并不能修复它。
I am having a very odd opacity/hover problem in IE. Everything works in FF and Chrome.
Consider this page:
<!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>
Here's the problem. The mouse-over is intermittent - you may or may not see a red background and font change in IE (7 or 8). You will always see the cursor change. If I take the background and font-weight out, I still see the cursor change. But if either the background or the font-weight are there, The cursor will still change but the background or font may or may not.
If the opacity is NOT set on #outer, everything works everywhere. Again, FF and Chrome are fine.
What do you think?
UPDATE: This semes to be restricted to IE8. When IE8 is in compatability mode (acting like IE7) all is well!
But, including this tag in header:
<meta id="metaIE8IE7" http-equiv="X-UA-Compatible" content="IE=7" />
does NOT fix it.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
遇到了同样的问题并找到了解决方案（尽管我的解决方案是针对 a:hover 而不是 li:hover 并且我没有测试过）
基本上，请确保元素“has-layout”。例如，display:block 等。然后重置该元素的透明度。 -ms-过滤器：“”；
Had the same problem and found a solution (although my solution was for a:hover not an li:hover and I've not tested)
Basically, make sure element 'has-layout'. For example, display:block, etc. Then reset transparency for that element. -ms-filter: "";
刚刚得到了完美的工作组合：
正如鲍勃所说，“has-layout”对于它在 ie 8 中工作至关重要。这里是“display: block;”完成工作。
just got the perfect working combination:
As Bob sayed the 'has-layout' is essential for it to work in ie 8. Here the 'display: block;' does the job.
对我来说更多 CSS 货物崇拜！我不知道，但是将 IE8 切换到 IE7 模式解决了这个问题。我错误地认为它在问题中不起作用。在其他浏览器中也仍然很好。
More CSS cargo-cult for me! I have no idea, but focing IE8 into IE7 mode fixed the problem. I was wrong about it not working in the question. Still good in other browsers too.