小虾虎鱼

小虾虎鱼

在IE中鼠标需要经过a标签中的文字才能改变背景色

作者 禾惠 发表于 2012/08/15,最后修改于 2012/08/15

    今天无意间发现IE中的一个BUG,在IE中鼠标需要经过a标签中的文字才能改变背景色,而非IE浏览器则只要经过A标签即可触发hover状态。如下图所示:


    A标签定义了display:block;且没有定义宽度,图中整个绿色区域为a标签,红色区域表示含有文字的区域。在IE中,当鼠标经过红色区域的时候能够触发hover状态,而经过绿色区域则无法触发hover状态,在非IE浏览器中则正常。测试代码如下:

HTML:

<div class="box">
    <div class="box-inner">
        <a href="#">test</a>
    </div>
</div>

CSS:

.box{width:100px;}
.box-inner{position:relative;}
a{display:block;background:blue;}
a:hover{background:red;}

解决方法:

①将样式中的.box和.box-inner合并到一个div中即可(推荐);

②定义a标签的宽度。