a标签hover在IE下失效的案例分析
时间:2011-06-16 来源:低调地享受
*{margin:0;padding:0}<div class="divsix">
<a id="domain_index" runat="server">
<span>
<asp:Image ID="domain_index_img" runat="server" ImageUrl="~/images/first1.png" />
</span>
</a>
</div>
.divsix a span img{ border-width:0;}
.divsix a:hover{ display:block;padding:0;}
.divsix a:hover span{ top:-6px;}
<a id="domain_index" runat="server">
<span>
<asp:Image ID="domain_index_img" runat="server" ImageUrl="~/images/first1.png" />
</span>
</a>
</div>
.divsix a span{ position:relative;cursor:hand; color:#000; }
.divsix a span img{ border-width:0;}
.divsix a:hover{ display:block;padding:0;}
.divsix a:hover span{ top:-6px;}
上述代码是一个菜单的部分源码,效果是当鼠标放在a标签上时,span标签向上移动6px的距离,看起来有种动感,但是当页面中加入*{margin:0;padding:0}属性后,上面的a:hover span{}效果在IE下消失了,解决的方法是将其改写为body{margin:0; padding:0;}即可
相关阅读 更多 +