IE CSS Bug系列:边框在:hover状态下消失 Bug

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

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

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

受影响版本

该bug影响:IE8

表现

这个Bug是从James Hopkins整的网页看到的。当鼠标悬停在某个元素上时,有的情况下看不见border-bottom了。在设置了outline属性后,元素 :hover 状态时border-bottom宽度会少一个像素(可能与outline互相抵消了)。

教程日期

2009-08-13,13:45:47, 星期四

描述

这个bug是我在James Hopkins的页面中发现的。具体的问题是这样子的:当父元素设置了padding属性后(即便属性值为0),该元素处在:hover状态时,元素底部边框无法显示,当设置outline属性后,边框宽度的第一个像素无法显示(看起来就像跟底部的outline互相抵消了)。

示例

示例在一个单独页面上页面

HTML代码

CSS代码

第一个链接元素设置了outline值,当它处在:hover状态时,在IE8中看起来底部的outline不见了。对于第二个链接元素,:hover状态下底部边框不见了。如果把边框值设置大一点(比如说设置为5px),对于第二个链接,底部边框仍然无法显示,对于第一个链接元素,底部边框实际值要比属性值小1px(即4px)。(译者注:经过测试,不只是border-bottom会有这个bug,border-top也会有边框消失的bug。)

 

解决方案

以下是按照解决方案类型排序的解决方案:

解决方案(清理方案 Clean Solution)

时间

2009-8-13 14:02:07

修复版本

所有受影响版本

具体方案

这个bug的解决方案非常简单。下面是一个已经修复过的demo:

demo可以在示例页面查看

HTML 代码:

CSS Code:

修复bug的绝招就是对 a:hover { }设置{position: relative;}。注意:如果对非:hover状态设置{position: relative}(比如说这样子: a { position: relative; }),那么这个bug将依然存在。

收藏 评论

关于作者:厉瑶

有理想有自我价值实现感的前端程序媛,坐标杭州,专注于前端开发,立志成为优秀前端工程师,个人博客(新浪微博:@玉面小飞鱼) 个人主页 · 我的文章 · 2

相关文章

可能感兴趣的话题



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