2

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

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

我尝试将我的 doctype 声明从 HTML5 更改为 HTML4 strict，但没有任何改变 - 有什么想法吗？

谢谢！

编辑：相关的 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 中无效，这是令人困惑的部分......

4

4 回答 4

1

我在IE8中遇到了这个问题，上面的解决方案没有奏效。

最后，上述不起作用的原因与我正在使用数据表并且我正在使用 ajax 异步获取数据这一事实有关。如果我将表格切换为使用静态数据，悬停效果很好，但不适用于 ajax。

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

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

于 2014-10-31T15:21:35.220 回答
1

这个问题是由于position:relative on the .header-nav ul li a tag...我不知道为什么 IE8 不能处理这个问题（而 IE7 可以！）。我的解决方法是通过增大 line-height 属性来模拟相对定位（并添加 *line-height 以解决 IE7 渲染中的差异）。

如果有人对导致此问题的原因有任何见解，我很想听听！

希望这有助于未来困惑的前端开发人员，他们被困在旧版本的 IE 中......

于 2013-07-30T13:32:54.627 回答
0

低于 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; }
于 2013-11-28T16:32:27.410 回答
0

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
于 2015-01-09T16:14:24.130 回答