[css] The upper and lower borders set by a:hover are invalid in ie6 and ie7_html/css

[css] The upper and lower borders set by a:hover are invalid in ie6 and ie7_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:48:21

Original

1691 people have browsed it

I discovered this problem while writing styles some time ago. Although the bug was solved at that time, I still recorded it to avoid such a problem from happening again.

Demo code:

<!doctype html><html lang="en"><head>    <meta charset="UTF-8"/>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>    <meta name="renderer" content="webkit"/>    <meta name="keywords" content=""/>    <meta name="description" content=""/>    <title>a:hover 设置上下边框在 ie6 和 ie7 下失效</title>    <style>    a{text-decoration:none;}    a:hover{color:#f00;border:2px solid orange;}    </style></head><body>    <a href="javascript:;">a:hover 设置上下边框在 ie6 和 ie7 下失效</a></body></html>

Copy after login

Through the demo we can find that in ie6 and ie7 browsers, when the mouse is moved up, the upper and lower borders are not displayed and only the left and right borders are displayed. But other browsers display it normally, why?

Because the hasLayout attribute of the a tag is false in ie6 and ie7, what is hasLayout? Please Baidu, I won’t say much here.

Now that you know it is a problem with hasLayout, you only need to set hasLayout. There are many ways to set it. Here are 2 commonly used methods:

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

Copy after login

PS:

80% of the bugs in IE are caused by the element not having hasLayout, so if you encounter an unexplainable problem in IE, the first thing to do is to give the element Add hasLayout.