This piece of CSS code is quite simple. The purpose is to use CSS to control the display and hiding of a certain paragraph of text. At first, I used the following code. What is incredible is that they didn't respond in my IE6.0. If you don't believe it, try it yourself.
The code is as follows: |
Copy code |
<Style type = "text/css"> A {font-size: 12px; Text-decoration: none; Height: 50 ;} A: hover {text-decoration: none ;} A span {font-size: 12px; Display: none ;} A: hover span {display: block ;} </Style> <A href = "#"> link <span> hidden content </span> </a>
|
I carefully checked the code and couldn't find any problem. There is no way. I can only try to change the code in CSS just like checking and correcting errors. When I changed the code in the hover pseudo-class Link (The code is as follows), I suddenly found that the code can run.
To check whether CSS really has this bug, I used styles such as size, color, and position to test it without changing the hover pseudo-class link, under normal circumstances. It can be learned that the CSS style is invalid when the selection operator has a pseudo-class link. We hope this error can be corrected in the next version of CSS.
The code is as follows: |
Copy code |
A: hover {text-decoration: none; border: none ;}
|
In this way, we can know that the hover pseudo-class Link must contain some special CSS attribute declarations to eliminate this bug.
I used all attribute declarations in CSS to solve this bug and found that only a few attribute declarations can solve this problem.
Border
Display
Postion
Overfilow
Background
The reason why I use the "border: none" method is that it can also eliminate some different CSS errors from Netscape 4.
Note: The bugs mentioned in this article exist in IE5.5 and IE6.0.