[Css] a: hover fails to set the upper and lower borders under ie6 and ie7. hoverie7

[Css] a: hover fails to set the upper and lower borders under ie6 and ie7. hoverie7

I found this problem when writing styles some time ago. Although this bug was solved at that time, I still kept a record to avoid this problem again.

Demo code:

<! Doctype html> 
Through the demo, we can find that in ie6 and ie7 browsers, only the left and right borders are displayed when the mouse moves up and down borders, while other browsers are normally displayed. Why?
Because the hasLayout attribute of a label in ie6 and ie7 is false, What Is hasLayout? I will not talk about Baidu here.
Now that we know the problem is hasLayout, we only need to set hasLayout. There are many methods to set it. Below are two common methods:
a:hover{position:relative;}a:hover{zoom:1;}
PS:
In ie, 80% of bugs are caused by the absence of hasLayout in the element. If you encounter an undefinable problem in ie, the first thing to do is to add hasLayout to the element.