1.The Declaration of the document type. Conditions: IE6 Browser, when we do not write this document declaration, will trigger the IE6 browser strange parsing phenomenon; Workaround: Write a document declaration. 2. Different browsers, many of the default style of the label, such as the default external Butyrolactone patch. Conditions: different browsers; workaround: Use the CSS reset file for style cleanup, and then set it as needed. 3. Horizontal double margin conditions: when the block element floats in the IE6, there is a horizontal double margin phenomenon. Workaround: Add display:inline4 to the style control of the float label. Default row height conditions: IE6, IE7, roaming browser, setting the text height beyond the height of the box model content area setting affects the layout. Workaround: Set Overflow:hidden for labels that are out of height, or set the line height line-height of the text to be less than the height of the block. 5.img external border generation conditions: IMG External has a tag, that is, the IMG tag has a link solution: Set the IMG border border:0;6. The picture is spaced by default. Conditions: IMG tag (after each IMG hit Enter) Workaround: Set float layout for IMG. 7. Classic 3 pixel bug generation condition: IE6 browser, floating block element and non-floating block element are in the same row, with default 3px spacing. WORKAROUND: Set non-floating element floats. 8. Default row High condition: When the float is cleared, some people take a floating method, use an empty div, and then set {Clear:both} for the Div. In most browsers, there is no problem with this, but in IE6 browsers, the DIV will have a default row height, even if it is empty. Workaround: Set its height to 0 and set the Overflow:hidden. {Height:0;overflow:hidden;clear:both;} 9.A label Hover does not apply to all label generation conditions: IE6 browser Hover only supports the use of a tag, does not support all other label use; Workaround: Properly use a tag to nest other inline tags or use JavaScript to simulate the hover effect of a For details, please check the log: Compatible IE6 A label hover effect 10.table label Border-color property setting is invalid to produce conditions: IE6 table setting property Border-color Invalid; Workaround: Use CSS styles for control instead of using attributes for style processing. 11.png format Picture generation conditions: IE6 browser, does not support transparency; workaround: Use JavaScript for processing, or use GIF, JPG images instead of PNGThe use of pictures. 12. Transparent Rgba and opacity conditions: IE6 does not support the two transparent setup methods; Workaround: Use the filter filter in the IE6 instead, such as: Opacity:0.6;filter:alpha (opacity=60). 13. Sub-selectors in IE6 can not be used to produce conditions: IE6 browser, using the E>f sub-selector; workaround: Use a different selector or use a descendant selector for control, such as: Div p{margin:10px;} div p p{margin:0;} Replace div>p{margin:10px;}. 14. Maximum minimum width and height conditions are not supported: IE6 browser, minimum height/width setting for labels (min/max-height) Workaround: Set hack individually for IE6, i.e. _height: minimum height value; _width: Minimum width value (for IE6, When the actual width is greater than the defined width, the element automatically adjusts the width height. For maximum height and maximum width, there is no need to set up compatibility, currently for the developer, only need to ensure that the IE6 under normal display, no need to spend too much effort on it. 15. Centered vertically, IE6 does not support Display:table-cell generation conditions: IE6 browser, set one element to align vertically in another element, not to support the display of elements as cells; Workaround: If it is a single line of text, The use of line-height and height of the combination of text vertically centered, if the middle is other elements or multiple lines of text, using other methods to center processing, there are a variety of processing methods, see the log: CSS elements horizontal Vertical center. 16.input Focus frame color and style different conditions: Each browser performance is different; Processing method: Use Outline:none, clear the default style, and then unify the settings. 17. Mouse over the small hand effect to produce conditions: Ie6,cursor:hand:ie fully supported. But in Firefox is not supported, no effect. Cursor:pointer: Is the standard of CSS2.0. So Firefox is supported, but IE5.0 is not supported by the previous version. IE6 began to support. ; solution: Set up two kinds of cursor:pointer; Cursor:hand. 18. Child tags cannot open the height of the parent tag to create conditions: The parent tag contains one or more child tags, the parent tag is not set to float, and the child label floats; Method 1: Add a clear floating setting at the end of the child tag; Method 2: Add {Overflow:hidden to the parent tag; Method 3: Set a fixed height for the parent tag. 19.li spacing problem generation condition: IE6 browser LiThe label setting is wide, and the elements inside Li are floating; method 1:li does not set the width height; method 2:li The inner label does not float. 20. In-line element layout confusion conditions: When an inline element is a containing box, if the containing box contains an absolute positioning element that is positioned as a percentage, the processing method: add {zoom:1} to the element within the row, triggering the haslayout of IE. For more information about Haslayout, see the log: Haslayout the source of the Internet Explorer bug. 21. Multiple display of one word generation conditions: multiple floating elements in the middle of an HTML comment statement, the width of the floating element is set to 100%; the last character of the previous line is displayed on the next line; Processing method: Delete the comment 22.CSS Priority! Important Generation conditions: IE6, in the same set of CSS properties,!important does not work; Processing method: Set individually. 23.img picture Lower height extra 5px production conditions: IE6 browser; Processing method: Convert the picture to a block-level object, that is, Display:block. There are also four other ways to explain the details in detail in the log: "IE6 BUG picture element img Height exceeds the presence of extra whitespace"
Some of the compatible IE6 exist
