IE6 compatibility problems IE6 Common Bugs

IE6 compatibility issues and IE6 Common Bugs

Source: Internet domain name time: 03-31 16:03:45 [large, medium, small]

The compatibility issue of IE6 has always been a nightmare of front-end engineers. In order to get out of this dilemma early on, this article has compiled some related compatibility knowledge. If you are interested, please refer to it and hope to help you.

1. IE6 weird parsing: Calculation of padding and border into width and height

Cause: Non-box model Parsing is caused by no document Declaration

Solution: add the Document declaration. <! Doctype HTML>

 

2. IE6 doubles the margin value when the block element, left and right float, and Marin is set (bilateral distance)

Solution: Display: inline

 

3. The following three types are actually the same bug, but they are not actually a bug. For example: parent label height 20, child tag 11, vertical center, 20-11 = 9,9 how do I divide the text above and below? IE6 will be different from others, so try to avoid it.

1) if the font size is odd, the border height is less than 1px.

Solution: Set the font size to an even number or line-height to an even number.

2) line-height, text vertical center deviation 1px

Solution: Use padding-top to center line-height, or add or subtract 1 to line-height.

3) 1px deviation is caused by the center of the parity value different from the width of the parent label.

Solution: if the parent label has an odd width, the Child label also uses an odd width. If the parent label has an even width, the Child label also uses an even width.

 

4. When the internal box model exceeds the parent level, the parent level is extended.

Solution: parent labels use overflow: hidden

 

5. Line-height default line height bug

Solution: Set the line-height value.

 

6. There will be a small gap between line labels

Solution: float or structure side by side (poor readability, not recommended)

 

7. The label height cannot be less than 19px

Solution: overflow: hidden;

 

8. The left floating element margin-bottom is invalid.

Solution: Display and set the height or parent label. Set _ padding-bottom to replace the margin-bottom of the sub-label. Then, place a label to let the parent label float.

Margin-bottom, that is, (margin-bottom and float do not act on a tag at the same time)

 

9. IMG is added to the block element, and the bottom side is blank.

Solution: Set overflow: hidden as the parent; or IMG {display: block;} Or _ margin:-5px;

 

10. There will be spacing between Li

Solution: float: left;

 

11. The block element contains text and right floating row elements, and the line element is wrapped

Solution: place the Row Element before the text in the block element.

 

12. Left and bottom under position are misplaced.

Solution: Set the width and height for the parent relative layer or add * ZOOM: 1

 

13. If position is set in the child level, the parent level overflow is invalid.

Solution: Set position: relative for the parent

 

The following is a supplement:

 

1. Ultimate method: Condition Annotation

<! -- [If lte ie 6]> This text is only displayed in IE6 and IE6 versions. <! [Endif] -->

<! -- [If gte ie 6]> This text is only displayed in IE6 and later versions. <! [Endif] -->

<! -- [If gt ie 6]> This text is only displayed in IE6 or later versions (excluding IE6 ). <! [Endif] -->

<! -- [If IE 5.5]> This text is only displayed in ie5.5. <! [Endif] -->

<! -- Load CSS in IE6 or earlier versions -->

<! -- [If lte ie 6]> <link type = "text/CSS" rel = "stylesheet" href = "CSS/ie6.css" mce_href = "CSS/ie6.css"/> <! [Endif] -->

The disadvantage is that the Internet Explorer may add additional HTTP requests.

 

2. CSS selector Differentiation

IE6 does not support sub-selectors. It first uses the regular declarative CSS selector for IE6, and then uses the sub-selector for IE7 + and other browsers.

 

Copy code

The Code is as follows:

/* Dedicated for IE6 */

. Content {color: red ;}

/* Other browsers */

Div> P. Content {color: Blue;} -->

 

3. PNG translucent Images

Although it can be solved through JS and other methods, there are still problems such as loading speed. Therefore, this can be avoided as much as possible in the design. To achieve the maximum optimization of the website.

4. rounded corners under IE6

IE6 does not support the rounded corner attribute of css3. The most cost-effective solution is to replace the rounded corner of the image or discard the rounded corner of IE6.

 

5. Flashing IE6 background

If you use CSS Sprites as the background for links and buttons, you may find that the background image flashes in ie6. This is because IE6 does not cache the background image and will be reloaded every time the hover is triggered. You can use JavaScript to set IE6 to cache these images:

 

Copy code

The Code is as follows:

Document.exe ccommand ("backgroundimagecache", false, true );

 

6. Minimum Height

IE6 does not support the Min-height attribute, but considers the height as the minimum height. Solution: use properties not supported by IE6 but supported by other browsers! Important.

 

Copy code

The Code is as follows:

# Container {Min-Height: 200px; Height: Auto! Important; Height: 200px ;}

 

7. maximum height

 

Copy code

The Code is as follows:

// Directly use ID to change the maximum height of an element

VaR Container = Document. getelementbyid ('Container ');

Container. style. Height = (container. scrollheight> 199 )? "200px": "Auto ";

// Write as a function to run

Function setmaxheight (elementid, height ){

VaR Container = Document. getelementbyid (elementid );

Container. style. Height = (container. scrollheight> (height-1 ))? Height + "PX": "Auto ";

}

// Function example

Setmaxheight ('Container', 200 );

Setmaxheight ('Container', 500 );

 

8. 100% height

In IE6, if you want to define a 100% height for an element, you must clearly define the height of its parent element. If you want to define a full screen height for an element, you must first define the height: 100%; for HTML and body ;.

 

9. Minimum Width

Like Max-height and max-width, IE6 does not support Min-width.

 

Copy code

The Code is as follows:

// Use ID directly to change the minimum width of an element

VaR Container = Document. getelementbyid ('Container ');

Container. style. width = (container. clientwidth <width )? "500px": "Auto ";

// Write as a function to run

Function setminwidth (elementid, width ){

VaR Container = Document. getelementbyid (elementid );

Container. style. width = (container. clientwidth <width )? Width + "PX": "Auto ";

}

// Function example

Setminwidth ('Container', 200 );

Setminwidth ('Container', 500 );

 

10. Maximum Width

 

Copy code

The Code is as follows:

// Directly use ID to change the maximum width of an element

VaR Container = Document. getelementbyid (elementid );

Container. style. width = (container. clientwidth> (width-1 ))? Width + "PX": "Auto ";

// Write as a function to run

Function setmaxwidth (elementid, width ){

VaR Container = Document. getelementbyid (elementid );

Container. style. width = (container. clientwidth> (width-1 ))? Width + "PX": "Auto ";

}

// Function example

Setmaxwidth ('Container', 200 );

Setmaxwidth ('Container', 500 );

 

11. Bilateral distance bug

When an element is floating, IE6 incorrectly calculates the margin value in the floating direction twice. I personally think it is better to avoid using float and margin at the same time.

 

12. Clear floating

If you want to use Div (or other containers) to wrap a floating element, you will find that you must give Div (container) A defined attribute (except the auto value) in height, width, and overflow can strictly enclose floating elements.

 

Copy code

The Code is as follows:

# Container {border: 1px solid #333; overflow: auto; Height: 100% ;}

# Floated1 {float: Left; Height: 300px; width: 200px; Background: # 00f ;}

# Floated2 {float: Right; Height: 400px; width: 200px; Background: # f0f ;}

More: http://www.twinsenliang.net/skill/20090413.html

 

13. floating layer dislocation

When the content exceeds the width defined by the outsourcing container, in IE6, the container ignores the defined width value, and the width increases incorrectly with the content width.

There is no satisfactory solution to the floating layer dislocation problem in IE6. Although overflow: hidden; or overflow: Scroll; can be used to fix it, hidden is prone to other problems, scroll breaks the design, and JavaScript cannot solve this problem well. Therefore, we recommend that you avoid this problem in layout. Use a fixed layout or control the width of the content (add width to the inner layer ).

 

14. Dodge bug

In IE6 and ie7. A floating element that breaks through the container. If there is a non-floating content after it, and there are some definitions: hover links, when the mouse moves over those links, in ie6.

The solution is simple:

1. Add a <span style = "clear: Both;"> </span>

2. Trigger haslayout of the container containing these links. A simple method is to define Height: 1% for the container;

 

15. 1 pixel spacing bug of absolute positioning Elements

This error in IE6 is caused by the carry processing error (IE7 has been fixed). When the parent element of the absolute positioning element is high or the width is odd, bottom and right generate an error. The only solution is to define a clear high-width value for the parent element, but there is no perfect solution for the liquid layout.

 

16. 3-pixel padding bug

In IE6, when the text (or non-floating element) follows a floating element, there will be an additional 3 pixel interval between the text and the floating element.

Add a negative value of "display: inline" and "-3px" to the floating layer.

Define margin-right for the intermediate content layer to correct-3px

 

17. Z-index bug in IE

In IE browser, the Z-index level of the positioning element is relative to the parent container of the corresponding element, which leads to an error in Z-index. The solution is to define the Z-index for its parent element. In some cases, you also need to define position: relative.

 

18. overflow bug

In IE6/7, overflow cannot properly hide sub-elements with relative position: relative. The solution is to add position: relative; to the outsourcing container. Wrap ;.

 

19. Horizontal list width bug

If you use float: Left; To set the <li> horizontal column, and <A> (or other) contained in <li> triggers haslayout, in IE6, errors may occur. The solution is simple. You only need to define the same float: Left; For <A>.

 

20. List step bug

A list tier bug is usually triggered when <A> float: Left; is used for the <li> sub-element. We intend to create a horizontal list (usually the navigation bar ), however, ie may be vertical or tiered. The solution is to define float: left for <li> instead of sub-elements <A>, or define display: Inline for <li>.

 

21. Vertical list gap bug

When we use <li> to include a block-level sub-element, IE6 (which may also be possible in IE7) Incorrectly adds gaps between each list element (<li>.

Solution: Set <A> flaot and clear float to solve this problem. Another method is to trigger <A> haslayout (such as setting the height and width, using ZOOM: 1 ;); you can also define <li> display: inline; to solve this problem. In addition, it is very interesting to add a space at the end of the included text.

 

22. hover in IE6

In IE6, in addition to the href attribute, the hover action can be triggered. This prevents us from achieving many mouse touch effects, but there are still some ways to solve it. It is best not to use: hover to implement important functions, just use it to enhance the effect.

 

23. IE6 window size adjustment bug

When the body is placed in the center and the size of the IE browser is changed, any relative positioning element in the body will remain unchanged. Solution: define position: relative; for the body.

 

24. Text duplication bug

In IE6, some hidden elements (such as comments and display: none; elements) are included in a floating element, which may lead to a text repetition bug. Solution: Add display: inline; to the floating element ;.

 

From http://www.jb51.net/css/76894.html>

IE6 compatibility problems IE6 Common Bugs