当前位置:Gxlcms > html代码 > 【css】a:hover设置上下边框在ie6和ie7下失效_html/css_WEB-ITnose

【css】a:hover设置上下边框在ie6和ie7下失效_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:16人阅读

前段时间在写样式的时候发现了这个问题,虽然当时就解决了这个 bug 不过还是记录下,以免再次出现这样的问题。

demo 代码:

                        a:hover 设置上下边框在 ie6 和 ie7 下失效        a:hover 设置上下边框在 ie6 和 ie7 下失效

通过 demo 我们可以发现,在 ie6 和 ie7 浏览器中,鼠标移上去上下边框不显示只有左右边框显示,而其他浏览器都是正常显示,为什么呢?

因为 a 标签在 ie6 和 ie7 中 hasLayout 属性为 false,至于何为 hasLayout?请百度,这里我就不多说了。

既然知道了是 hasLayout 的问题,那么只需要设置 hasLayout 就行了,设置的方法有很多,下面就列出常用的 2 种方法:

a:hover{position:relative;}a:hover{zoom:1;}

PS:

ie 下 80% 的 bug 都是由于元素没有 hasLayout 所造成的,所以如果在 ie 下碰到难以解释的问题,第一件事情要做的就是给该元素添加 hasLayout。

人气教程排行