IE CSS Bug系列：Hover伪类的白背景被忽略

2013/10/26 · Web前端, 书籍与教程, 开发 · IE, IE CSS Bug, IE7

分享到：

本文由伯乐在线 - rubyisapm 翻译。未经许可，禁止转载！
英文出处：haslayout。欢迎加入翻译组。

伯乐在线导读：IE 浏览器不支持很多 CSS 属性是出了名的，即便在支持的部分中，也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 问题，有简单的问题示例，也有解决方法。这个系列共有 58 个指南，70 个解决方案。这篇由伯乐在线前端开发小组的 @rubyisapm 翻译。（欢迎更多前端开发朋友来加入“前端开发”小组。）

【提示】：IE CSS BUG 系列译文正在进行中，后续或有改动和调整，请不要转载本系列的译文。

—————————————————————————–

受影响的浏览器版本

IE7

表现

:hover状态下背景没有改变

教程日期

2009 8.11 19:50:22 星期二

描述

因为产生这个bug的触发器如此不可理喻，我真不知道这个bug是怎么被发现的。我从http://css.tests.free.fr/en/exemple46.php了解到这个bug，如果你也在实际的网站中踩到了这个坑，那我请你喝一杯吧！让我们来看看这个bug：

演示

演示在一个单独的页面上。

HTML Code

<div><a href="#">Hover Me</a></div>

1	<div><a href="#">Hover Me</a></div>

CSS Code

div {
    background-color: #000;
}

a {
    width: 100%;
    display: block;
    border: 1px solid #000;
    color: #ddd;
}
a:hover {
    background-color: #fff;
    color: #000; 
}

div {

background-color: #000;

}

a {

width: 100%;

display: block;

border: 1px solid #000;

color: #ddd;

}

a:hover {

background-color: #fff;

color: #000;

}

在IE7中，链接上发生hover时背景不会变为白色，这个bug真是太脆弱了，相比修复教程，也许我该写个“该bug如何产生”的教程。来看看吧：非hover状态是需要“layout”的,:hover选择器中设置了background-color(没有使用background或background-image样式)。非hover状态是需要设置边框而不需要设置背景的。该bug只出现在:hover状态下将background-color设置为纯白色（#fff,#ffffff或white）的情况下。（特扯淡吧？）

解决方案（清洁方案）

以下是针对此bug的解决方案

解决日期

2009 8.11 20:54:32 星期二

修复版本

所有受影响的版本

描述

针对此bug有超多的解决方案，在这里我只说一种，修复后的页面展示在一个单独的页面上