CSS bugs led by Show/hide

This section of CSS code is quite simple, the purpose is to use CSS to control the display of a paragraph of text and hide. At first I used the following code, it is amazing that they did not respond to my IE6.0, we do not believe that you can test it yourself.

<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="http://cms.cnblogs.com/index.php#">link<span>我是隐藏内容</span></a>

I checked the code carefully and couldn't find anything wrong. There is no way, I can only check error correction like normal, try to change the code in the CSS. When I changed the code in the hover pseudo-class link (as shown in the code), I suddenly found that the code could run.

In order to confirm whether the CSS really exists the bug, I specifically use the size, color, location and other styles to test, without changing the hover pseudo-class links, under the premise, can not get the normal situation should be the effect. So you can tell: when there is a pseudo-class link with the selector, there is a bug in the CSS style is not valid, I hope that the next version of CSS can fix this error.

a:hover {text-decoration:none;border:none;}

This allows us to know that some special CSS attribute declarations must be included in the hover pseudo class link to eliminate the bug. I used all the attribute declarations in CSS to try to solve the bug and found that only a few attribute declarations would solve the problem. This article is from http://bianceng.cn (Getting started with programming)

Border

Display

Postion

Overfilow

Background

The reason I'm using the "border:none" approach is because it eliminates some of the different CSS errors from Netscape 4.

Note: The bugs mentioned in this article exist in both IE5.5 and IE6.0.