CSS compatibility issues Summary

1. Keep in mind the following rules, but it is not recommended to use hack.

All browsers are universal (IE6IE7FF used mainly in the market) height:100px;

IE6 Special _height:100px;

IE6 Special *height:100px;

IE7 Special *+height:100px;

IE7, FF common use height:100px!important;

2.CSS compatible
The following two methods can solve almost all of today's compatibility.

(1)!important (not recommended, use one of the following to feel safest)
With IE7 support for!important, the!important method is now only for IE6 compatibility. (Note the wording. Remember that the statement location needs to be advanced.)
Code:
<style>
#wrapper {
Width:100px!important; /*ie7+ff*/Firefox IE7 When browsing is 100px wide;
width:80px; /*ie6*/IE6 When browsing is 80px wide;
}
</style>

(2) Ie6/ie77 CSS style for Firefox<from for firefoxie6ie7 >
*+html and *html is the unique label of IE, Firefox is not supported. And *+html is a special label for IE7. * 1th indicated above
Code:
<style>
#wrapper {width:120px;} /*firefox*/
*html#wrapper{width:80px;} /*ie6fixed*/
*+html#wrapper{width:60px;} /*ie7fixed, note the order */
</style>

Attention:
*+html compatibility with IE7 must ensure that the top of the HTML has the following declaration:
Code:
<! DOCTYPE HTML Public "-//w3c//dtd HTML4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >

3. Other compatibility tips (quite useful)
Setting padding to Div after 1,ff will cause width and height to increase, but IE will not. (Can be resolved with!important)
2, centering problem.
1). Center vertically. Set Line-height to the same height as the current Div, and then through Vetical-align:middle. (Note that the content does not wrap.)
2). Center horizontally. Margin:0auto; Although not omnipotent but limited insight, did not know that the browser is not suitable for this method, know the friend advice!
3, if you need to give the contents of a tag style, you need to set display:block; (Common in the Navigation tab, I tried the error, padding how to set Padding-left is not valid, in fact, the principle is to make a tag like a div as a block element definition)
The difference between 4,ff and IE on box understanding led to a 2px difference between the div set to float and the margin doubling in IE.
The 5,ul tag has list-style and padding under FF by default. It is best to make a statement beforehand to avoid unnecessary trouble. (Common in navigation labels and table of contents) (A good habit is to set the file at the beginning) *{margin:0;padding:0;} * Do not advocate this use, each write better.
6, as an external wrapper div do not set dead height, it is best to add Overflow:hidden. To achieve a high degree of self-adaptation. (self-adapting height I am accustomed to use: Tail add <div style= "Clear:both;" >)
7, about the hand cursor. Cursor:pointer. and hand only applies to IE. Paste the code:
8, IE6 double margin Bug
<styletype= "Text/css" >
body{margin:0}
div{float:left;margin-left:10px;; Height:200px;border:1pxsolidred}
</style>
Floating after the original outside 10px, but IE interpreted as 20px, the solution is to add Display:inline this is the classic will not say.

CSS compatibility issues Summary