Browser compatibility issues and solutions

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;" > </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-width/height have no effect in IE6, Solution: (1):. ABC{BORDER:1PX blue solid;width:200px;height:200px;}        Html>body. abc{width:auto;height:auto;min-width:200px;min-height:200px;} (2):. abc{width:200px;height:200px;_width:200px;_height:200px;} (Because IE6 has a feature, when you define a height, 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 has a space between the solution: Li set 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;                                                 IE6 special _height:100px; IE7 Special *+height:100px;    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 row when multiple floating elements are interspersed with an HTML comment statement, if the floating element is 100% wide, the next line displays the last character of the previous line. Workaround: Add display:inline to floating elements;. Opacity defines the opacity Filter:alpha (opacity=80) of the element,/*ie supports this property */opacity:0.8;/* browser CSS3 two block elements, vertical margin value does not increase, will overlap, Its spacing is 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; ---------------------------Supplement-------------------------------IE6 does not support fixed copy code/* For non-IE6 can write */#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));    The replication code 16 resolves the IE6 maximum, minimum width and height hack method copy Code/* 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);} Copy code Z-index does not work BUG1) 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 father level of high and low not only to see themselves, but also to see their dad this backstage is hard enough. Described in terms specific to: 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.            Each version of IE hack Copy code/* 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{}/*ie7*/

Browser compatibility issues and resolutions