Ie6 compatibility problem summary, ie6 compatibility Summary

Ie6 compatibility problem summary, ie6 compatibility 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. Generation Condition: different browsers; solution: Clear the style using the CSS reset file, and then set it as needed. 3. horizontal double margin Generation Condition: After the block elements in IE6 are floating, the horizontal double margin will appear. Solution: Add "display: inline4" to the style control of the float label. The default line height conditions are IE6, IE7, and browser; when the text height exceeds the height set in the Box Model content area, the layout is affected. 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. img external border Generation Condition: img external has a label, that is, when the img label has a link, solution: Set the img border: 0; 6. The image has a spacing by default. Generation Condition: img label (after each img, press Enter) solution: Set float Layout mode for img. 7. Typical 3-pixel bug Generation Condition: In the IE 6 browser, the floating block element and the unfloating block element are in the same row, with the default 3px spacing. Solution: Set non-floating element floating. 8. default Row Height Generation 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 browsers, this is not a problem, but in IE6 browsers, div will have a default line height even if it is empty. Solution: set its height to 0 and overflow: hidden. {Height: 0; overflow: hidden; clear: both;} 9. label a hover is not applicable to all tags. in IE 6, hover only supports label a and does not support all other tags. solution: reasonably use the tag to nest other intra-Row labels or use javascript to simulate the hover effect of a. For details, see the log: compatible with IE6 a tag hover 10. invalid border-color attribute settings in table labels. condition: the border-color attribute of table settings in IE6 is invalid. Solution: Use CSS styles for control, instead of using attributes for style processing. 11.png format: the IE 6 browser does not support transparency; solution: use javascript for processing; or use gif or jpg images to replace png images. 12. transparent rgba and opacity conditions: IE6 does not support these two transparent setting methods. Solution: Use the filter in IE6, for example, opacity: 0.6; filter: alpha (opacity = 60 ). 13. the sub-selector in IE6 cannot use the generation condition: IE6 browser, use E> F sub-Selector; solution: Use another selector or use descendant selector for control, such as: div p {margin: 10px;} div p {margin: 0;} replaces div> p {margin: 10px ;}. 14. maximum, minimum, width, and height are not supported. For IE6 browsers, set the minimum height and width of tags (min/max-height). Solution: Set hack separately for IE6, that is, _ height: minimum height value; _ width: Minimum width value (for IE6, when the actual width and height exceed the defined width, the element will automatically adjust the width and height ). 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 the display: table-cell condition: IE6 browser, which sets the center alignment of one element in the vertical direction of another element, elements cannot be displayed in cells. Solution: for a single line of text, use line-height and height to center the text vertically, if there are other elements or multiple lines of text in the middle, other methods are used for center processing. There are multiple processing methods. For details, see log: CSS elements are horizontally and vertically centered. 16. The color of the input focus box is different from that of the style. The browser performs differently. Solution: Use outline: none to clear the default style and set it again. 17. When you move the mouse over a small hand, the following conditions are available: IE6, cursor: hand: IE. 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 label cannot be extended. The parent label contains one or more child labels. The parent label is not set to float, but the child label is floating. Solution: Method 1: add the settings for clearing floating at the end of the sub-tag <div style = 'height: 0; clear: both '> </div>; Method 2: Add {overflow: hidden;} to the parent tag ;} method 3: set a fixed height for the parent label. 19. condition for li spacing problem: the li label of IE6 browser sets the width and height, and the elements in li are floating. Solution: Method 1: li does not set the width and height; Method 2: labels in li are not floating. 20. the layout of element in the row is disordered. When an element in the row is an include box, if the absolute positioning element contained in the box is located in percentages, add {zoom: 1} to trigger hasLayout of IE. For more information about hasLayout, see the log: hasLayout IE browser bug source. 21. display more than one word Generation Condition: Multiple floating elements are mixed with HTML comment statements, and the floating element width is set to 100%. The next line displays the last character of the previous line. Processing Method: delete comments decisively! 22. CSS priority! Important Generation Condition: IE6, in the same group of CSS attributes ,! Important does not work; processing method: set separately. 23. img image bottom height excess 5px production condition: IE6 browser; processing method: Convert the 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"