IE6 下 a:hover 的 BUG 及办理要领

发布时间：2018-10-10 03:23:53 所属栏目：运营来源：站长网

导读：写页面的时辰碰着一个IE6的BUG,不知道各人有没有见过: 当鼠标点到链接,触发a:hover结果后, .column的padding-top会翻倍,仅在IE6下有这个题目, 办理的步伐倒是有,就是不知道为什么会呈现这种BUG !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//

写页面的时辰碰着一个IE6的BUG,不知道各人有没有见过:

当鼠标点到链接,触发a:hover结果后, .column的padding-top会翻倍,仅在IE6下有这个题目, 办理的步伐倒是有,就是不知道为什么会呈现这种BUG

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>IE6 a:hover bug? - liehuo.net</title> <style type="text/css"> *{ margin:0; padding:0;} .column{ width:168px; padding-top:10px; } .column ul{ float:left; width:100%; } .column ul li{ float:left; width:124px; height:26px; line-height:26px; list-style:none; background:#e6e6e6; border-bottom:1px #000 dashed; text-align:center;} .column ul li a{ display:block; width:100%; height:26px; color:#000; text-decoration:none;} .column ul li a:hover{ background:#0044dd;} </style> </head> <body> <div class="column"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> </div> <div class="column"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> </div> <div class="column"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> </div> </body> </html><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

办理要领：

结论: padding更加假象的基础缘故起因是IE6的3px引起的，与a:hover无关
办理: 1. 在a标签后加"<br />"标签即可
2. 给a标签和a:hover 配置同样的配景致

我这里只要去掉UL的浮动就可以了。

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

OPPO概念机泄露，5000	华为找到了让手机支持
Redmi K50 Pro屏幕升级	天玑8100电竞旗舰仅要