Common compatibility problems Summary

* Png24 bit iE6 picture appears on the browser background, the solution is made PNG8. Can reference a script treatment.

* Different browsers default margin and padding. Solution is added to a global * {margin: 0; padding: 0;} to unity.

* IE6 bilateral distance bug: After the block attribute labels float, there are circumstances under margin rampant, shows a large margin than set in ie6.

* Double floating ie produced from (IE6 bilateral from questions: In IE6, if the set of floating elements, while provided or margin-left margin-right, margin value is doubled.)
#Box {a float: left; width: 10px; margin: 0 0 0 100px;}

under such circumstances occur IE 20px distance, the solution is added to the label style --_ display control float of: inline; which was converted to the attribute row. (_ Symbol identifies only ie6)

* progressive identifiable manner, gradually excluded from the local population.

First, the use of clever "\ 9" this flag, IE's browser will be separated from all cases.
Next, again using the "+" and the IE8 IE7, IE6 separated, so IE8 been identified independently.

CSS
.bb {
background-Color: # f1ee18; / * all tags * /
.background-Color: # 00deff \. 9; / * IE6,7,8 recognition * /
+ background-Color: # a200ff; / IE6, 7 * identifying * /
_background-Color: # 1e0bd1; / * IE6 recognition * /
}

* Under IE, you can use conventional methods to obtain the property to get custom attributes,
you can also use the getAttribute () Gets custom attributes;
under Firefox, only use getAttribute () Gets custom attributes.
Solution: Unity getAttribute () Get custom properties.

* under IE, event object has x, y attributes, but there is no pageX, pageY attributes;
lower Firefox, event object has pageX, pageY properties, but there is no x, y property

* solution :( conditions Notes) the disadvantage is that in the IE browser may add additional HTTP requests.

* Chinese interface under Chrome default text will be smaller than 12px 12px mandatory in accordance with the display,
by adding CSS property -webkit-text-size-adjust: none; resolved.

* After the hyperlink is not accessible hover style appeared to be visited by clicking hyperlink styles not having hover and active a solution is to change the order CSS properties:
LVHA: a: link {} a: visited {} a: hover {} a: active {}

* quirks mode problems: leakage write DTD statement, Firefox will still be in accordance with the standard mode to parse the page, but IE will trigger quirks mode. To avoid quirks mode gives us unnecessary trouble, it is best to form good habits writing DTD declaration. Can now be used [html5] (http://www.w3.org/TR/html5/single-page.html) Recommended wording: `<DOCTYPE HTML>`

* vertically overlapped margin problem
ie and ff are present, the two adjacent div margin-left and margin-right will not overlap, but the margin-top and margin-bottom but overlap may occur.
Solutions, to develop good coding habits, while using margin-top or while using margin-bottom.


* Ie6 png image format support is not good for (quote a scripting)

Guess you like

Origin www.cnblogs.com/yangboy/p/12144518.html