Differences between IE6 and other browsers

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.

/* 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:

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.

# Container {Min-Height: 200px; Height: Auto! Important; Height: 200px ;}
7. maximum height

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

// 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

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

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

 

Differences between IE6 and other browsers