Internet Explorer 6 and common compatibility problems of various browsers, Internet Explorer 6

Internet Explorer 6 and common compatibility problems of various browsers, Internet Explorer 6

Summary: Although IE6 will be suspended in April 2014, it cannot be said that the market of IE6 will not immediately dissipate as support stops. for front-end WEB development engineers, compatible with IE6 and various browsers, it is still a task to be faced.
This section summarizes common browser compatibility issues, including the common compatibility issues of IE6 for your sharing.

If you need to reprint, please indicate the source: Netease blog-Lone ice Sea: Internet Explorer 6 common compatibility problems Summary
1. <! Doctype html> document type declaration.
Production Condition: IE6 browser, when we do not write this document declaration, it will trigger the strange parsing phenomenon of IE6 browser;
Solution: Write the Document declaration.
2. In different browsers, many labels have different default styles, such as the default external patch.
Production Conditions: different browsers;
Solution: Use the CSS reset file to clear the style and then set it as needed.
3. horizontal double margin
Generation Condition: After the block elements in IE6 are floating, the horizontal double margin phenomenon occurs.
Solution: Add display: inline to the style control of the float label.
4. The default Row Height
Production Conditions: IE6, IE7, and browser; layout is affected when the text height exceeds the height set in the content area of the box model.
Solution: Set overflow: hidden for the label that exceeds the height, or set the line-height of the text row to a height smaller than the block.
5. border outside img
Condition: the img has an external a tag, that is, when the img tag has a link
Solution: Set the img border: 0;
6. The image is separated by default.
Generation Condition: img Tag (after each img, press Enter)
Solution: Set float layout for img.
7. Classic 3-pixel bug
Generation Condition: in IE6 browser, the floating block element is in the same row as the unfloating block element, with the default 3px spacing.
Solution: Set non-floating element floating.
8. The default Row Height
Condition: When floating is cleared, some people will adopt a clear Floating Method, use an empty div, and then set {clear: both} For This div }. In most
In the browser, this is no problem, but in the IE6 browser, even if the div is empty, there will be a default line height.
Solution: set its height to 0 and overflow: hidden. {Height: 0; overflow: hidden; clear: both ;}
9. a label hover does not apply to all labels
Condition: hover only supports the use of the label in IE6 browser, and does not support the use of all other labels;
Solution: reasonably use the label to nest other intra-Row labels or use javascript to simulate the hover effect of a. For details, see the log: compatible with the hover effect of the IE6 a label.
10. The border-color attribute setting in the table label is invalid.
Condition: the border-color attribute set by table in IE6 is invalid;
Solution: Use CSS styles for control, rather than using attributes for style processing.
11.png format
Production condition: the IE 6 browser does not support transparency;
Solution: use javascript for processing, or use gif or jpg images instead of png images.
12. Transparent rgba and opacity
Condition: IE6 does not support these two transparent setting methods;
Solution: Use the filter in IE6 to replace it, for example, opacity: 0.6; filter: alpha (opacity = 60 ).
13. The sub-Selector cannot be used in IE6.
Generation Condition: IE6 browser, using E> F sub-Selector;
Solution: use another selector or descendant selector for control. For example, div p {margin: 10px;} div p {margin: 0;} replaces div> p {margin: 10px ;}.
14. Maximum, minimum, width, and height are not supported.
Generation Condition: in IE6 browser, set the minimum label height/width (min/max-height)
Solution: Set hack separately for IE6, that is, _ height: Minimum height; _ width: Minimum width (for IE6, when the actual width and height exceed the defined width, the width and height of the element are automatically adjusted ). There is no need to set compatibility between the maximum height and the maximum width. for developers, you only need to ensure that IE6 is properly displayed without spending too much effort on it.
15. Vertical center, IE6 does not support display: table-cell
Generation Condition: in IE6 browser, an element is set to center and aligned vertically in another element. The element cannot be displayed in cells;
Solution: for a single line of text, use line-height and height to align the text vertically. If there are other elements or multiple lines of text in the middle, use other methods to center the text, there are multiple processing methods. For details, see log: CSS elements are horizontally and vertically centered.
16. The color and style of the input focus box are different.
Production Conditions: different browsers have different performances;
Solution: Use outline: none to clear the default style and set it again.
17. Move the mouse over the small hand
Generation Condition: IE6, cursor: hand: IE is fully supported. But it is not supported in firefox and does not work. Cursor: pointer: is the standard of CSS2.0. So firefox is supported, but IE5.0 is not supported in earlier versions. IE6 is supported .;
Solution: set two cursor: pointer; cursor: hand.
18. The height of the parent tag cannot be extended for sub-tags.
Condition: the parent tag contains one or more sub-tags. The parent tag is not set to float, but the sub-tag is floating;
Solution: Method 1: Add floating clearance settings at the end of the sub-tag <div style = 'height: 0; clear: both '> </div>; Method 2: add a {overflow: Den den;} style to the parent tag. Method 3: set a fixed height for the parent tag.
19. li spacing Problem
Generation condition: the li label of IE6 browser is set to wide and high, and the elements in li are floating;
Solution: Method 1: li does not set width and height; Method 2: labels inside li do not float.
20. Chaotic layout of element in the row
Condition: When an element in a row is an inclusive box, if the absolute positioning element contained in the box is located in percentage;
Solution: Add {zoom: 1} to the element in the row to trigger hasLayout of IE. For more information about hasLayout, see the log: hasLayout IE browser bug source.
21. Show one more word
Generation Condition: Multiple floating elements are mixed with HTML comments. If the floating element width is set to 100%, the last character of the previous line is displayed in the next line;
Solution: Delete the comment!
22. CSS priority! Important
Generation Condition: IE6, in the same group of CSS attributes ,! Important does not work;
Solution: Set it separately.
23. img image bottom height excess 5px
Production Condition: IE6 browser;
Solution: convert an image into a block-level object, that is, display: block. There are also four other methods. For details, see the log: "excessive white space occurs when the height of the img Image Element in IE6 exceeds the limit"
This article goes to: http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201371611543769/