Complete Set of common CSS bugs and solutions in IE6

IE6 double margin bug

When multiple consecutive fluctuations exist on the page, for example, the icon list on this page uses the left floating mode. When the left-side margin value of li is set, the left-side display doubles. For example, if the outer margin is set to 10 PX, and the left side shows 20 PX, the solution is to add the display: inline; style to the floating element to avoid the double margin bug.

 

3 pixel Problems and Solutions

When float floating containers are used, 3px space is generated in IE6. It is interesting that 3px is inside the right container when no height is set in the right container, when the height is set, the container is displayed on the left. For more information about the layout accuracy, see solutions for example 29 and 31.

 

How can the parent container adapt to the height of the child element when the child element is floating and unknown?

In this case, you can add the overflow: auto; zoom: 1; style attributes in the parent window. overflow: auto; enables the parent container to adapt to the height of the internal container. zoom: 1; css hack is used to be compatible with IE6. Zoom: 1; it is a pity that it cannot pass W3C verification. Fortunately, IE supports <! -- [If IE]> This method can be used to write a separate style for IE. Therefore, you can write this attribute in the <! -- [If IE]>.

 

Problems with the hover style after hyperlink access

Click to access the hyperlink style is not with hover and active, many people should have encountered this problem, the solution is to change the CSS attribute order: L-V-H-A
A: link {color: #1f3a87; text-decoration: none ;}
A: visited {color: # 83006f; text-decoration: none ;}
A: hover {color: # bc2931; text-decoration: underline ;}
A: active {color: # bc2931 ;}

How are there gaps between the two layers in IE6?
This IE 3PX BUG often occurs. The solution is to float: left or define. left margin-right:-3px relative to IE6;

IE6 text overflow BUG
Note: Text overflow caused by comments is an ie bug.

CSS failure caused by a space
This Code defines the first character style of <p> in IE6, Which is ineffective (IE7 is not tested), but in p: first-letter and {font-size: 300%} with a space, that is, p: first-letter {font-size: 300%}, the display is normal. But the same code is normal in FireFox. In principle, p: first-letter {font-size: 300%} is correct. So where is the problem? The answer is the hyphen "-" in a pseudo-class "-". IE has a BUG. When dealing with pseudo-classes, if the pseudo-class name contains a hyphen "-", the pseudo-class name must be followed by a space, otherwise the style definition will be invalid. In FF, the processing can be done without spaces.

The odd-and-wide BUG in IE6
IE6 also has an odd-width-high bug. The solution is to change the external relatively positioned div width to an even number.

Why is there a gap in the image below IE6?
There are also many ways to solve this BUG, which can be to change the html layout or define img as display: block.
Or define the vertical-align attribute to vertical-align: top | bottom | middle | text-bottom.
You can also set the font size of the parent container to zero, font-size: 0

 

Label height in ie6
If the height of an empty div is set to 0 to 19px, the height of IE6 is always 19PX by default.
For example:
. C {background-color: # f00; height: 0px;/* specify any height smaller than 20px */}
<Div class = "c"> </div>

If it is not allowed, the default value is 19PX. If it is 0 PX
There are three solutions:
1.css with overflow: hidden;
2. Add comments to the div,
<Div class = "c"> <! --> </Div>
3.add line-height: 0 in CSS, and then add # nbsp in div ;,
<Div class = "c"> & nbsp; </div> (# Replace &)

Fixed the duplicate text bug.

Complex la s can trigger the final characters of floating elements, which may occur in the bug of clearing elements. There are several solutions, some of which are perfect, but it is also necessary to do some repeated tests:

• Make sure that all elements use "display: inline ;"
• Use a "margin-right:-3px;" on the last element ;"
• # Use a condition annotation for the last entry of the floating element, for example:
  <! -[If! IE]> Put your commentary in here... <! [Endif]->
• Use an empty div in the last element of the container (it is also necessary to set the width to 90% or similar width .)