Browser compatibility issues

Common browser compatibility issues when you're learning HTML and CSS, you'll always have a lot of browser compatibility issues when you cut graphs every day. Recently, we have been focusing on mobile platform development, regardless of the number of browser compatibility issues for HTML and CSS. So far, so many browser compatibility is almost forgotten. Today to share the knowledge of the previous summary, by the way I also review. Of course, there must be a lot of deficiencies, look at the AH.  1 ie6.0 horizontal margin doubling factor: block attribute, float, horizontal margin. Workaround: Display:inline;2 ie6.0 under the default line high resolution: Overflow:hidden, or font-size:0, or line-height:xx px;3 in each browser IMG has a gap (reason: enter. Workaround: Let the picture float. 41 Parent Tags nested with several child tags, parent tag does not float, child label float, child label does not open the parent's height. Workaround: A in the sub-label finally clear floating {<div style= "height:0;clear:both;" >&nbsp;</div>}                  B parent tag add {Overflow:hidden;}                   C set height to parent tag 5 Ie6, maximum width, height, and minimum width height are not recognized, meaning min-width/height and Max-wi Dth/height no effect in IE6, Solution: (1):. ABC{BORDER:1PX blue solid;width:200px;height:200px;}                           Html>body. Abc{width:auto;he ight:auto;min-width:200px;min-height:200px;}          (2):. abc{width:200px;height:200px;_width:200px;_height:200px;} (Because IE6 has a feature that when a height is defined, the element automatically adjusts the height if the content exceeds the height. 6 Ie6 Inside: If Li set wide, high, and Li inside the label floating, then Li will have a space solution: Li does not set wide, high, or Li label does not float 7  li between the solution: Li settings vertical-align:middle;8 3 MP problem: IE6, there is a three-pixel problem between floating elements and flow elements when they are displayed in parallel.     WORKAROUND: Use hack technology, for example: All browsers universal height:100px;                   &N Bsp                     IE6         _HEIGHT:100P Special x;                                  nbsp               IE7 dedicated *+height:100px;             &NBSP ;                          ,         &NB Sp Ie6/ie7 Common *height:100px;9 chaos occurs when the inline element is defined as a containing box, and the containing box contains an absolute positioning element that is positioned as a percentage.     Workaround: Add {zoom:1;}10 to the element in the line when multiple floating elements are interspersed with an HTML comment statement, if the floating element has a width of 100%, the next row displays the last character of the previous line more than one.       &nbsp Workaround: Add display:inline to floating elements;. Opacity defines the opacity of the element   Filter:alpha (opacity=80);/*ie supports this property */  opacity:0.8;/* browser CSS3 two block elements, Vertical margin values do not increase, overlap, and are spaced to the maximum margin value. 13 Priority: The CSS property noted by!important has the highest priority (. abc{color:red!important;}). However,!important has a bug in IE6:!important does not work in the same set of CSS properties. 14  Firefox does not recognize Background-position-y or background-position-x; 

---------------------------2014.01.10 Supplement-------------------------------

IE6 does not support fixed

/* This can be written for non-IE6 */#top {position:fixed;      bottom:0;  right:20px;      }/* But IE6 does not support fixed positioning, need to rewrite */#top {position:fixed;      _position:absolute;      top:0;      right:20px;      _bottom:auto;  _top:expression (eval (Document.documentElement.scrollTop));}      /* use hack to make IE6 achieve this effect, but this thing will blink, need the following code */*html{Background-image:url (About:blank);  background-attachment:fixed;      }/* make fixed at top/#top {_position:absolute;      _bottom:auto;  _top:expression (eval (document.documentElement.scrollTop));      }/* Fixed at bottom */#top {_position:absolute;      _bottom:auto; _top:expression (eval (document.documentelement.scrolltop+ document.documentelement.clientheight-this.offsetheight-(parseint (this.currentStyle.marginTop) | | 0)-(parseint (this.currentStyle.marginBottom) | |  0)));    }/* Vertical Center */#top {position:fixed;    top:50%;    margin-top:-50px;    _position:absolute; _top:expression (eval (DOCUMENT.DOCUMENTELEMENT.SCROLLTOP+DOCUMENT.DOCUMENTELEMENT.CLIENTHEIGHT/2)); }

16 solving IE6 maximum, minimum width and height hack method

/* Minimum width */.min_width{    min-width:300px;    _width:expression (parseint (this.clientwidth) < 300? "300px": This.clientwidth);} /* Maximum width */.max_width{   max-width:600px;   _width:expression (parseint (this.clientwidth) > 600? "600px": This.clientwidth);} /* min. height */.min_height{   min-height:200px;   _height:expression (parseint (this.clientheight) < 200? "200px": This.clientheight);} /* Maximum height */.max_height{   max-height:400px;   _height:expression (parseint (this.clientheight) > 400? "400px": This.clientheight);}

Z-index bugs that don't work

1) IE6 first of all, the first Z-index no matter how high the setting is. There are three conditions for this situation: 1, the parent Tag position property is relative;2, and the problem label contains a floating (float) attribute.
2) All browsers: it only recognized the first dad.
The level of high and low not only to see themselves, but also to see their dad this backstage is hard enough. The term is described specifically as:
When the parent tag position property is relative or absolute, the absolute property of the child label is relative to the parent tag. And in IE6, the performance of the hierarchy is sometimes not to look at the z-index of sub-labels, but to see their parent tag z-index who is high and low.

All versions of IE hack

/* Class internal hack:*/    . Header {_width:100px;}            /* IE6 dedicated */    . Header {*+width:100px;}        /* IE7 dedicated */    . Header {*width:100px;}            /* IE6, IE7 shared */    . Header {width:100px\0;}        /* IE8, IE9 shared */    . Header {width:100px\9;}        /* IE6, IE7, IE8, IE9 shared * *    . Header {width:330px\9\0;}    /* IE9 dedicated *//* selector hack:*/    *html. header{}        /*ie6*/     *+html. header{}    

Browser compatibility issues (GO)