[Beat IE's Sunflower Treasure Book] IE6 CSS Common bug complete and solution

IE6 double margin Bug

When there are multiple consecutive floats within the page, such as the icon list on this page is left floating, when the left margin value of Li is set, the left side is doubled. If the margin is set to 10px, and the left side is 20px, the way to solve it is to add display:inline on the floating element, so as to avoid double margin bug.

3 Megapixel problems and solutions

When using float float container, under the IE6 will produce 3px gap, it is interesting that the right container is not set height 3px in the right container, when the height is set to run to the left side of the container, so the layout accuracy requirements, please refer to Example 29, 31 of the solution.

How do I fit the parent container to the height of the child elements when the child elements are floating and unknown height?

This situation can be added to the parent window overflow:auto;zoom:1, the two style properties, Overflow:auto, is to let the parent container from the internal container to adapt to the height, zoom:1, is to be compatible with IE6 and the use of CSS HACK. Zoom:1, but it is also a pity, but fortunately, ie support <!--[if ie]> this type of writing, can be specifically for IE to write a separate style, so you can write this property in the page <!--[if ie]>, This should be verified by the.

hover style does not appear after hyperlinks have been accessed

The clicked Hyperlink style is not hover and active, many people should have encountered this problem, the workaround is to change the order of CSS properties: 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;}

IE6, there's a gap in the middle of these two layers .
This IE 3PX bug also often appears, the solution is to give. Right also floating float:left or relative IE6 definition. Left margin-right:-3px;

IE6 text overflow bug
Note : The comment caused the text overflow is IE bug.

A blank space causes the CSS to fail
This code on the <p> 's first character style definition on the IE6 is not effective (IE7 not tested), and in P:first-letter and {font-size:300%} plus a space, that is, P:first-letter { font-size:300%}, the display is normal. But the same code, in Firefox, looks normal. According to the truth, p:first-letter{font-size:300%} is the correct way to do that. So where does the problem go? The answer is the hyphen "-" in the pseudo-class. IE has a bug, when dealing with pseudo-classes, if the name of the pseudo-class with a hyphen "-", the Pseudo-class name followed by a space, or the definition of the style is invalid. In the FF, the addition of spaces can be handled normally.

IE6 The odd-width-high bug
The IE6 also has odd-wide bugs, and the solution is to change the width of the external relative positioning Div to an even number.

IE6 Why is there a void below the picture ?
There are many ways to fix this bug, either by changing the layout of the HTML, or by defining the IMG as Display:block
or define the Vertical-align property value to Vertical-align:top | bottom |middle |text-bottom
You can also set the parent container's font size to zero, font-size:0

example:
<div class= "C" ></DIV>

If you do not let it default to 19PX. But 0PX.
There are 3 ways to solve this problem:
1.css inside plus Overflow:hidden;
2.div with notes,
<div class= "C" ><!––></div>
3.css inside add line-height:0, then div inside add #nbsp;
<div class= "C" >&nbsp;</div> (#换成 &)

Fixed duplicate text bug

A complex layout can trigger a bug where the last characters in a floating element may appear under the purge element. There are several solutions, some of which are perfect, but it is also necessary to do some repetitive tests:

• Make sure that all elements use "display:inline;"

• Use a "margin-right:-3px;" on the last element.

• # Use a conditional comment for the last entry of the floating element, such as:

  <!–[if! Ie]>put your commentary in here...<! [endif]–>

• The last element in the container uses an empty div (it is also necessary to set the width to 90% or similar width. )

[Beat IE's Sunflower Treasure Book] IE6 CSS Common bug complete and solution