Some CSS compatibility issues

Due to the different browsers, there are some compatibility issues, especially compatible with IE6/7/8

Here are some workarounds, and more questions can be accessed by w3help.org.

Browser version can be obtained via JS

Document.body.innerhtml=navigator.useragent

---
Some CSS compatibility issues
----

1, reset technology such as:

*{
margin:0;
padding:0;
}
Too rough, not recommended to use

2.CSS priority: By weight value

A.! Important Priority Highest A=1 b,c,d=0

B.! Imporant>id> pseudo-class, class> element, pseudo-element

Id:b=1 a,c,d=0
Pseudo-class, Class:c=1 a,b,d=0
Elements, pseudo-elements: a,b,c=0 d=1;
* For 0

C. The higher the weight value, the higher the priority



3.CSS hack Technology (patching, can not be abused), mainly for the browser to resolve the different, do not know the properties will ignore it, use it to solve some compatibility problems.

1.ie6: Attribute preceded by "_". (Only IE6 know)
2.ie7: Add "*,+,>,<" after the property value. ("*,+,>,<" IE6, IE7 know).
3.IE8: Add "*\0" after the property value. (IE8 know the \9).

4.ie6 floating first appears double margin.

Solution: _display:inline;

5.ie6,ie7 height collapse

Haslayout (whether layout label) value is True or False

FIX: Zoom zoom out, trigger Haslayout in Ie6,ie7 to True
(*zoom:1;)

Non-IE parent elements follow child element move resolution: Add border, overflow, padding

6. Picture default spacing

Solution: Float

7.IE6 does not support min-height.

Solution: _height/height:auto!important;

Min-width not supported

CSS expressions (try not to use them in IE6)

_width:expression
(documentelement.clientwidth<500? ") 500px ":" Auto ");

8. Passing conditional annotations

<!--[If LTE IE 6]>
This content is only shown in versions less than or equal to IE6
<! [endif]-->

Some CSS compatibility issues