Ie6 Common Compatibility and ie6 Common Compatibility

Ie6 Common Compatibility and ie6 Common Compatibility

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

 

Compatibility issues with css selectors

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.

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

The following code is used:

document.execCommand("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.

The Code is as follows:

#container {min-height:200px; height:auto !important; height:200px;} 

 

7. maximum height

The Code is as follows:

// Directly use ID to change the maximum element height var container = document. getElementById ('Container'); container. style. height = (container. scrollHeight> 199 )? "200px": "auto"; // write it 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 ('container1', 200); setMaxHeight ('container2', 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.

The Code is as follows:

// Directly use ID to change the maximum width of the element var container = document. getElementById (elementId); container. style. width = (container. clientWidth> (width-1 ))? Width + "px": "auto"; // write it 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 ('container1', 200); setMaxWidth ('container2', 500 );

　　

// Directly use ID to change the element's minimum width var container = document. getElementById ('Container'); container. style. width = (container. clientWidth <width )? "500px": "auto"; // write it 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 ('container1', 200); setMinWidth ('container2', 500 );

10. Maximum Width

The Code is as follows:

// Directly use ID to change the maximum width of the element var container = document. getElementById (elementId); container. style. width = (container. clientWidth> (width-1 ))? Width + "px": "auto"; // write it 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 ('container1', 200); setMaxWidth ('container2', 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.

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

 

The above lists some bugs that we often encounter in ie6 and the solutions. I hope they can help you.