IE6 BUG Summary

1.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.

2.3 Megapixel problems and solutions

When a floating element is adjacent to a non-floating element (note that the adjacent can be vertical or horizontal), the 3-pixel bug appears, and it is offset by 3 pixels. The actual performance is a gap between the two elements! The workaround is simple, and it is OK to float all two elements. The underlying reason for this bug is that the layout of non-floating elements is not triggered, so as long as the CSS that can trigger layout can solve the problem.

3. How do I fit the parent container to the height of the child element when the child element is 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.

4. Hover style does not appear after hyperlink access

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;}

5.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;

6.ie6 Text Overflow bug
I ran into this bug before I wrote this article. It's pretty weird and funny. A piece of duplicate text that is not known, is IE6 displayed near the original text. (Note: You can also refer to the Explorer 6 Duplicate characters bug for a bug demo). I couldn't fix it, so I searched for it, and sure enough, this is another IE6 bug.
There are a number of workarounds for this, but none of them works for me (because of the complexity of the site I can't use some of these methods). So I used the hack. Adding a space after the original text appears to solve the problem.
However, from hippy Tech blog, it is understood that the reason behind the problem is due to the HTML comment tag. IE6 does not render it correctly. Here is a list of the solutions he proposes:
1. Use <!-[if! Ie]> tags surround annotations
2. Remove comments
3. Add style {Display:inline;} on the front float;}
4. Use negative margins on the appropriate floating div
5. Add additional &nbsp; (e.g. 10 spaces) to the original text (hacky)

7. A blank space causes the CSS to fail
This code for <p> 's first character style definition on 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.

8.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.

9.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

10.ie6 Empty Label Height issue
An empty div If the height is set to 0 to 19px,ie6 the height by default is always 19PX.
For example:
. c{height:0px;/* given any height less than 20px */}
<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> (#换成 &)

11. 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. )

Margin-left/right Bug of 12.ie6,7 failure

HTML code:

1<div class= "Wrap" >
2<div class= "cont" >www.hemin.cn</div>
3 </div>

CSS code:

1.wrap{background: #eee; border:1px solid #ccc;}
2.cont{border-bottom:2px solid #aaa; margin:0 100px;height:30px;}

WORKAROUND: Trigger. The layout of the warp is available. Specific examples: give. Warp plus zoom:1 or width and so on.

13. Relative Position and overflow concealment (Position Relative and Overflow Hidden)
I've encountered this problem many times, and I was preparing a jquery tutorial because I used a lot of overflow hidden to get the layout I wanted.
The problem occurs when the parent element's overflow is set to hidden and the child element is set to position:relative.
Css-trick has a good example to illustrate this bug. Position:relative and overflow in Internet Explorer
Workaround
Adds position:relative to the parent element;

Min. ie minimum height (min-height for IE)
This is simple, IE ignores the min-height attribute. You can use the following hack to fix it. Thanks Dustin Diaz.
This solution works well in IE6, Mozilla/firefox/gecko, Opera 7.x+, and Safari1.2.
Workaround

1selector {
2min-height:500px;
3height:auto!important;
4height:500px;
5} 15.PNG Transparent (PNG Transparency) iframe Transparent background (iframe Transparent Background)
You should not encounter this problem in Firefox or Safari because by default, the background of the IFRAME is set to transparent, but in IE, this is not the case. You need to use the Allowtransparency property and add the following CSS code to achieve the goal.
Workaround

/*in the IFRAME element */
<iframe src= "content.html" allowtransparency= "true" >
</iframe>


/*in the IFRAME docuement, in this case content.html */
Body {

}
17. Disable IE default vertical scroll bar (Disabled ie defaults Vertical Scroll bar)
By default, IE: IE6/7 displays a vertical scroll bar even if the content is appropriate for the window size. You can use Overflow:auto to make the scroll bar appear only when you need it. 18. Box Models Hack (Box Hack model)
This is the most popular bug in IE. The basic understanding is that IE calculates the width in different ways. Based on the standards, the total width of an element should be
Total width = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
However, IE does not add padding and borders when calculating the width:
Total width = margin-left + width + margin-right
For more details, please refer to this link: Internet Explorer and CSS box model explained in detail
Workaround
Use the standard compatibility mode. IE6 or later versions can be calculated based on the standard of the list, but you will still encounter problems in the IE5.
Or you can use CSS hack to solve this problem. All standard compatible browsers can read w\\idth:180px in addition to IE5.

#content {
padding:10px;
BORDER:1PX solid;
width:200px;
w\\idth:180px;
}

IE6 BUG Summary