IE6 Browser Common compatibility issues summary (23) [Reprint]

IE6 and common compatibility issues for each browser summary

Summary: Although IE6 will be discontinued in April 2014, it must be said that the IE6 market will not disappear with the support of the stop immediately, for Web front-end development engineers, compatible IE6 compatible with each browser, still have to face the work. in this summary of common browser compatibility issues, there are IE6 common compatibility issues for everyone to share.   1.<! DOCTYPE the declaration of the Html> document type. conditions: IE6 Browser, when we do not write this document declaration, will trigger the IE6 browser strange parsing phenomenon;Workaround: Write the document declaration. 2. Different browsers, many of the default style of the label, such as the default external Butyrolactone patch. production conditions: different browsers;Workaround: Use the CSS reset file to clear the style, and then set it as needed. 3. Horizontal double marginconditions: When the block element floats in the IE6, there is a horizontal double margin phenomenon. Workaround: Add display:inline to the Float label style control4. Default row Heightconditions: IE6, IE7, roaming browser, setting the text height beyond the height of the box model content locale will affect 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 Borderconditions: IMG External has a tag, that is, when the IMG tag has a linkWORKAROUND: Set the img border border:0;6. The image is spaced by default. Create Condition: IMG Tag (after each IMG hit Enter)Workaround: Set the float layout of float for IMG. 7. Classic 3 pixel bugconditions: IE6 Browser, floating block elements in the same row as the non-floating block elements, with a default 3px spacing. Workaround: Set non-floating element floats. 8. Default Row Height conditions: 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 in the browser, this does not have any problem, but in the IE6 browser, even if the div is empty, there will be a default row height. Workaround: Set its height to 0 and set the Overflow:hidden. {Height:0;overflow:hidden;clear:both;}9.a label hover not available for all labelsconditions: IE6 browser hover only support the use of a tag, do not support all other label use;Workaround: Use a tag to nest other inline labels or use JavaScript to simulate the hover effect of A; see the log for details: compatibility with IE6 a tags hover effectsInvalid Border-color property setting in 10.table tagConditions: IE6 Table setting property Border-color invalid;Workaround: Use CSS styles for control, rather than using attributes for style processing. 11.png format Picturesconditions: IE6 Browser, does not support transparency;Workaround: Use JavaScript for processing, or use GIF, JPG images instead of PNG images. 12. Transparent Rgba and opacityconditions: IE6 does not support the two transparent setting methods;Workaround: Use the filter filter in IE6 instead, such as: Opacity:0.6;filter:alpha (opacity=60). 13. Sub-selectors cannot be used in IE6production conditions: IE6 browser, using 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 height not supportedconditions: IE6 browser, label minimum height/width setting (min/max-height)Workaround: Set hack individually for IE6, that is, _height: Minimum height value, _width: Minimum width value (for IE6, the element will automatically adjust the width height when the actual width height exceeds the defined width). 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. Vertical centering,IE6 not supported Display:table-cell conditions: IE6 browser, set one element to be centered vertically in another element, not to support the display of elements in a cell;Workaround: If it is a single line of text, the use of line-height and height of the mate so that the text is 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 differs from styleproduction conditions: Each browser performance is different;How to: Use Outline:none, clear the default style, and then unify the settings. 17. Mouse over the small hand effectproduction 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. ;Workaround: Set two types ofCursor:pointer; Cursor:hand. 18. Child tags cannot open the height of the parent tagconditions: The parent tag contains one or more child tags, the parent tag is not set to float, and the child label is floating;Workaround : Method 1: Add clear floating settings at the end of the Sub-tab <div style= ' Height:0;clear:both ' ></div>; Method 2: Add {overflow:hidden for parent tag;} Method 3: Set a fixed height for the parent tag. 19.li spacing Problemconditions: IE6 browser Li tag set wide, and Li inside the element has been floating;Processing Method: Method 1:li does not set the width height, the label inside the method 2:li does not float. 20. In-line element layout confusionconditional: When an inline element is a containing box, the containing box contains an absolute positioning element that is positioned as a percentage;Processing Method: add {zoom:1} in line element, trigger IE's haslayout. For more information about Haslayout, see the log: Haslayout the source of the Internet Explorer bug. 21. Display one word moreconditions: Multiple floating elements in the middle of an HTML comment statement, the width of the floating element is set to 100%; the next line displays the last character of the previous line;how to deal with: Delete the comment decisively! 22.CSS Priority! Importantproduction conditions: IE6, in the same set of CSS properties,!important does not work;processing method: set separately. 23.img picture Lower height extra 5px production conditions: IE6 browser; How to: Convert a 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"

Reprinted from: NetEase blog-solo binghai: IE6 browser Common compatibility issues Large summary

IE6 Browser Common compatibility issues summary (23) [Reprint]