伯乐在线导读: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
1 |
<div><a href="#">Hover Me</a></div> |
CSS Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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有超多的解决方案,在这里我只说一种,修复后的页面展示在一个单独的页面上
HTML Code
1 |
<div><a href="#">Hover Me</a></div> |
CSS Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
div { background: #000; } a { width: 100%; display: block; border: 1px solid #000; color: #ddd; } a:hover { background: #fff; color: #000; } |
我只做了一件事:将background-color换成background,哦了~bug被修复了。如果这个方案对你不适用,只要看看bug是怎么被触发的,你就能找到很多的解决方案(例如:可以在:hover状态下设置background为接近白色的#fffffe或者设置position:relative)