IE 不透明度：有时悬停？答案

【问题标题】：IE opacity :hover sometimes?IE 不透明度：有时悬停？
【发布时间】：2011-04-04 08:15:05
【问题描述】：

我在 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" />

不修复它。

【问题讨论】：

旧版本的 IE（不记得哪个确切版本）不支持 :hover 除了锚点之外的任何东西，尽管对于这个它可能是 jQuery 用来哄骗 IE 的 filter制作类似于opacity 的东西。就我而言，filter 是古代遗留下来的巫毒教……
：悬停在工作 - 光标确实改变了。令人毛骨悚然的部分是，这是我的问题的一个非常简化的版本 - 我在“真实”页面上确实有 :hover 在所有方面都有效的区域。我希望能解决这个问题。
@Yijiang：IE8 中仍在使用过滤器来产生不透明度。但我同意你的看法，他们是 MS IE 巫毒教。

标签： css internet-explorer opacity

【解决方案1】：

刚刚得到了完美的工作组合：

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

正如 Bob 所说，“has-layout”对于它在 ie 8 中工作至关重要。这里是“display: block;”完成这项工作。

【讨论】：

【解决方案2】：

遇到了同样的问题并找到了解决方案（尽管我的解决方案是 a:hover 而不是 li:hover 并且我没有测试过）

基本上，确保元素“有布局”。例如，display:block 等。然后重置该元素的透明度。 -ms-filter: "";

【讨论】：

【解决方案3】：

对我来说更多的 CSS 货物崇拜！我不知道，但是将 IE8 设置为 IE7 模式可以解决问题。我错了它在这个问题上不起作用。在其他浏览器上也不错。

【讨论】：