Question

我有一个关联的锚链接列表：悬停属性 - 非常简单。 CSS在IE7和所有其他浏览器中运行良好，但在IE8中则不行。

.header-nav ul li a:hover {
     border-bottom: 1px dotted #fff;
}

我尝试将我的doctype声明从HTML5更改为HTML4严格且没有任何改变 - 任何想法？

谢谢！

编辑：相关的HTML：

<ul>
    <li><a href="http://www.google.com/">Getting Started</a>
    </li><li><a href="http://www.google.com/">Refill</a>
    </li><li><a href="http://www.google.com/">Status</a>
    </li><li><a href="http://www.google.com/">Services</a>
    </li><li><a href="http://www.google.com/">Conditions</a></li>
</ul>

常规CSS：

.header-nav ul {
    list-style-type:none;
    margin:0;
    padding-left:25px;
    position: absolute; 
    top: 10px;
    *top: 15px;
    left: 0;        
}

.header-nav ul li {
    display: inline-block;
    zoom: 1; *display: inline;      /* Fix for IE7 */
    padding: 0 40px;
}

.header-nav ul li a {
    text-decoration: none;
    line-height: 23px;
    font-size: 18px;
    position: relative;
    top: 7px;
    *top: 2px;  /* IE7 */
    color: #fff;    
}

再次，要清楚，这适用于IE7但不适用于IE8，这是令人困惑的部分...

Answer 1

此问题是由于 .header-nav ul li a 标记上的位置：相对 ...我不知道为什么IE8无法处理此问题（和IE7可以！）。我的修复方法是通过仅增加line-height属性来模拟相对定位（并添加* line-height以解决IE7渲染中的差异）。

如果有人对此问题的原因有任何见解，我很乐意听到它！

希望这可以帮助未来混淆的前端开发人员陷入困境，考虑旧版本的IE ...

Answer 2

我在IE8中遇到此问题，上述解决方案无效。

最后，上述原因不起作用的原因与我使用数据表并使用ajax异步获取数据这一事实有关。如果我将表切换为使用静态数据，则悬停工作正常，但不能与ajax一起使用。

我猜它与IE有关，无法将样式应用于动态添加的行或其他东西。

它在Chrome中运行良好......！

Answer 3

低于100％的工作解决方案。

.navigation li ul { opacity: 0; visibility: hidden; filter: alpha(opacity=0); // for ie8 and lower }

.navigation li:hover ul{ opacity: 1 !important; visibility: visible; filter: none !important; }

Answer 4

您可以在html文件的顶部添加以下行：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

IE8 bug - CSS“a：hover”属性不起作用

4 个答案: