IE6 compatibility issues and IE6 common bug detailed summary
1, IE6 Strange analysis of the padding and border calculation into the width of high
Reason: No document declaration causes non-box model parsing
Workaround: Add a document declaration <!doctype html>
2, IE6 in block element, left and right floating, set Marin margin double (bilateral distance)
Workaround: Display:inline
3, the following three is actually the same kind of bug, in fact, is not a bug, for example: the parent tag height 20, child label 11, vertical Center, 20-11=9,9 to the text above and below, how to divide? IE6 will be different from others, so try to avoid them.
1) less than 1px of border height with an odd font size
Workaround: The font size is set to even or line-height to even
2) line-height, Text vertical Center difference 1px
Workaround: Padding-top replace Line-height Center, or line-height plus 1 or minus 1
3) 1px deviation caused by odd or even different centering of the width of the parent label
Workaround: If the parent tag is an odd width, the child label is also an odd width, and if it is the even width of the parent tag, the child label also uses an even width
4. When the inner box model exceeds the parent, the parent is stretched
Workaround: Parent tag using Overflow:hidden
5, line-height default row high bug
WORKAROUND: Line-height Set Value
6, there will be a small gap between the row labels
Workaround: Float or structure side-by (poor readability, not recommended)
7, label height can not be less than 19px
Workaround: Overflow:hidden;
8, left floating element margin-bottom failure
Workaround: Display set height or parent tag setting _padding-bottom instead of margin-bottom or label to let parent label float, sub-label
Margin-bottom, i.e. (Margin-bottom and float are used for a label when different)
9, img in the block element, the bottom of the more blank
Workaround: Parent setting Overflow:hidden; or img {display:block;} or _margin: -5px;
10, there will be a gap between Li
Workaround: Float:left;
11, the block element has the text and the right floating line element, the line element wraps the line
Workaround: Place the row elements in front of the text inside the block element
12, position under the Left,bottom dislocation
Workaround: Set the width height or add *zoom:1 for the parent (relative layer)
13, the child has set position, the parent overflow invalid
Workaround: Set position:relative for the parent
Here are the additions: look first.
1. Ultimate Method: Conditional annotation
<!--[If LTE IE 6]> this text appears only in IE6 and IE6 versions below. <! [endif]-->
<!--[if GTE IE 6]> This text is only shown in IE6 and above IE6 versions. <! [endif]-->
<!--[if GT IE 6]> This text appears only in IE6 or above (not including IE6). <! [endif]-->
<!--[if IE 5.5]> this text appears only in IE5.5. <! [endif]-->
<!--loaded in IE6 and IE6 versions css-->
<!--[If LTE IE 6]> <link type= "text/css" rel= "stylesheet" href= "Css/ie6.css" mce_href= "Css/ie6.css"/><! [endif]-->
The disadvantage is that an additional number of HTTP requests may be added under IE browser.
2, CSS selector distinguish
IE6 does not support child selectors; Use the general declaration CSS selector for IE6 first, and then use the sub-selectors for ie7+ and other browsers.
3, PNG translucent picture problem
Although it can be solved by means of JS, but still there are loading speed problems, so, this design can avoid or try to avoid as well. To achieve maximum website optimization.
4. Rounded corners under IE6
IE6 does not support CSS3 fillet properties, the most cost-effective solution is to use the picture fillet to replace, or give up the IE6 fillet.
5. IE6 background Flashing
If you give the link, the button with CSS sprites as the background, you may find that the background image flashes under IE6. This is due to the fact that IE6 does not cache the background map, it reloads every time the hover is triggered, and the images can be cached with JavaScript settings IE6:
6, the minimum height
IE6 does not support the Min-height property, but it thinks height is the minimum height. WORKAROUND: Use an attribute!important that is not supported by IE6 but supported by the remaining browsers.
8, 100% height
Under IE6, if you want to define a 100% height for an element, you must explicitly define the height of its parent element, and if you need to define a full screen height for the element, you have to define the height:100% for the HTML and body first.
9. Minimum width
Like Max-height and Max-width, IE6 also does not support min-width.
11, bilateral distance bug
When the element floats, the IE6 will incorrectly double the margin value of the floating direction. A better solution for individuals is to avoid the use of float and margin simultaneously.
12. Clear Floating
If you want to wrap a floating element with a div (or other container), you will find that the DIV (container) must have a defined height, width, and a property in the overflow (except the auto value) to wrap the floating element tightly.
13, floating layer dislocation
When content exceeds the width defined by the outsourced container, the container ignores the defined width value in IE6, and the width increases incorrectly as the content width grows.
Floating layer dislocation problem in IE6 there is no real satisfactory solution, although you can use Overflow:hidden, or overflow:scroll; to fix, but hidden easily lead to some other problems, scroll will destroy the design JavaScript is not a good solution to this problem. Therefore, it is advisable to avoid this problem on the layout, using a fixed layout or controlling the width of the content (to add width to the inner layer).
14, hide and Seek bug
In IE6 and IE7, hide-and-seek bugs are a very annoying problem. A floating element that breaks the container, if there is no floating content after him, and there are some definitions: hover links, when the mouse moved to those links, the IE6 will trigger hide and seek.
The workaround is simple:
1. Add a <span style= "Clear:both" after (the non-floating) content; > </span>
2. Triggering the haslayout of the container containing the links, a simple method is to define the height:1%;
15.1 pixel spacing bug for absolutely positioned elements
The error under IE6 is due to a carry processing error (IE7 has been fixed), and bottom and right produce an error when the parent element of an absolutely positioned element is either high or wide odd. The only solution is to define a clear high-wide value for the parent element, but there is no perfect solution for liquid layout.
16, 3 pixel pitch bug
In IE6, when the text (or no floating element) is followed by a floating element, there is a 3-pixel interval between the text and the floating element.
Add display:inline and -3px negative margin to a floating layer
Define margin-right for the intermediate content layer to correct -3px
17, ie under the z-index of the bug
In IE, the z-index level of the anchored element is relative to the respective parent container, which causes the z-index to behave incorrectly. The workaround is to define the Z-index for its parent element and, in some cases, to define position:relative.
18. Overflow Bug
In IE6/7, overflow cannot correctly hide a child element with relative positioning position:relative. The solution is to outsource the container. Wrap plus position:relative;.
19. Horizontal List width bug
If you use Float:left, <li> horizontally, and <li> contains <a> (or other) triggers haslayout, there will be a false performance under IE6. The solution is simple, just need to define the same float:left for <a>.
20. List Ladder Bug
List ladder bugs are usually given to <li> sub-elements <a> use Float:left, when triggered, we mean to do a horizontal list (usually the navigation bar), but IE may appear vertical or ladder-like. The solution is to define the Float:left for <li> rather than <a> the child element, or to define display:inline for <li>;
21. Vertical list Gap Bug
When we use <li> to include a block-level child element, IE6 (IE7) incorrectly adds a gap between each list element (<li>).
Workaround: <a>flaot and clear float to solve this problem, another way is to trigger <a> haslayout (such as define aspect, use zoom:1;), or you can give <li> define display: inline; There is also a very interesting way to add a space to the end of the contained text.
22. In IE6: hover
In IE6, in addition to (need to have href attribute) to trigger: hover behavior, which prevents us to achieve a lot of mouse touch effect, but there are some ways to solve it. It is best not to use: hover to achieve important functions, just use it to enhance the effect.
23, IE6 Adjust the window size of the Bug
When the body is centered, changing the size of IE browser, any relative positioning elements inside the body will be fixed. Workaround: Define position:relative for the body;
24. Text Repeat Bug
In IE6, some hidden elements (such as annotations, Display:none, elements) are included in a floating element, which can cause text to be duplicated. Workaround: Add display:inline to floating elements;.
IE bug (if not enough, message everyone to share)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
