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

伯乐在线导读: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

CSS Code

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

 

解决方案(清洁方案)

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

解决日期

2009 8.11 20:54:32 星期二

修复版本

所有受影响的版本

描述

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

 

HTML Code

CSS Code

我只做了一件事:将background-color换成background,哦了~bug被修复了。如果这个方案对你不适用,只要看看bug是怎么被触发的,你就能找到很多的解决方案(例如:可以在:hover状态下设置background为接近白色的#fffffe或者设置position:relative

收藏 评论

关于作者:rubyisapm

前端程序媛…(新浪微博:@rubyisapm) 个人主页 · 我的文章

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部