Compatibility issues with browsers encountered (increase at any time)

1, the browser default margin and padding different. The solution is to add a global *{margin:0;padding:0;} To unify.

2, Png24 for the picture in the IE6 browser background, the solution is made PNG8.

3, IE6 two-sided bug: block attribute tag after float, there is the margin of the case, in the IE6 show margin than set the large.
The double distance generated by the floating IE #box {float:left; width:10px; margin:0 0 0 100px;}
In this case, IE will produce a distance of 20px, the solution is to add-display:inline in the label style control of float, and convert it into inlineproperties. ( only IE6 will recognize this symbol)
Gradual recognition of the way, from the overall part of the gradual exclusion.
First, the use of the "\9" mark, the Internet Explorer is separated from all situations.
Next, use "+" again to separate IE8 and IE7, IE6, so that IE8 has been independently identified.

CSS          . BB{background-color :  #f1ee18   ;          /* all recognition */ .background-color :  #00deff  \9   ;          /*ie6, 7, 8 identification */ +background-color :  #a200ff   ;          /*ie6, 7 identification */ _background-color :  #1e0bd1   ;          /*ie6 recognition */    

4, IE, you can use the method to get the general properties to get the custom properties,
You can also use GetAttribute () to obtain a custom attribute;
Under Firefox, you can only use getattribute () to get a custom attribute.
Workaround: Unify through getattribute () to get the custom attributes.

5, IE, the even object has an X, y attribute, but no pagex,pagey attribute;
Under Firefox, the event object has the Pagex,pagey property, but there is no X, Y property.

6, (conditional comment) disadvantage is that under IE browser may increase the number of additional HTTP requests.

7, the Chrome Chinese interface by default will be less than 12px of text force in accordance with 12PX display, you can add CSS properties-webkit-text-size-adjust:none; Solve.

8. After the hyperlink has been accessed hover style does not appear the hyperlink style that has been clicked has not been hover and active the workaround is to change the order in which CSS properties are arranged:
L-v-h-a: a:link {} a:visited {} a:hover {} a:active {}

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Compatibility issues with browsers encountered (increase at any time)