Compatibility to explore a

It's a cliché that CSS is compatible with every browser, and the tutorials on the web are all over the world. The following content is not too many novel, purely personal summary, hoping to have some help for beginners. ^_^
First, CSS HACK
Both methods can solve almost all the hack of today.
1,!important
With IE7 support for!important, the!important method is now only for IE6 hack. ( note the wording. Remember that the statement location needs to be advanced .)

< style>

#wrapper {

Width:100px!important; /* IE7+FF */

width:80px; /* IE6 */

} </style>

2, Ie6/ie77 to Firefox
*+html and *html is the unique label of IE, Firefox does not support.

And *+html is a special label for IE7.

<style>

#wrapper {width:120px;}/* FireFox */

*html #wrapper {width:80px;}/* IE6 fixed */

*+html #wrapper {width:60px;}/* IE7 fixed, note order */

</style>
Note: *+html's hack to IE7 must ensure that the top of the HTML has the following declaration: <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "http://www.w3.org/TR/html4/loose.dtd" >
Second, Universal float closed
The principle of clear float can be found in [how to clear floats without Structural Markup] Add the following code to the global CSS, add class= "to the div that needs to be closed" Clearfi X "can be" at this level.

<style>

/* Clear Fix */

. clearfix:after {content: "."; display:block; height:0; clear:both; visibility:hidden;} .clearfix {display:inline-block;}/* Hide from IE MAC */. clearfix {display:block;} /* End Hide from IE Mac */* End of Clearfix */</style>

third, other compatibility skills
1,ff setting padding after the div will cause width and height to increase, but IE will not. (Can be resolved with!important)
2, centering problem. 1). Center vertically.Line-height is set to the same height as the current Div, and then through Vertical-align:middle.         (Note that the content does not wrap.) 2). Center horizontally. margin:0 Auto; (of course not everything)
3, if you need to give the contents of a tag style, you need to set display:block; (common in navigation labels)
4, the FF and IE to the BOX understanding of the difference caused by 2px is also set to float div under IE margin doubled and so on.discussion on---->[compatibility two details]
5, UL label under FF The default is List-style and padding. It is advisable to declare beforehand to avoid unnecessary trouble. (Common in navigation labels and table of contents) generally used "*{margin:0; padding:0}"
6,as an external wrapper div do not set dead height, preferably plus overflow:hidden. To achieve a high degree of self-adaptation.
7, about the hand-shaped cursor. Cursor:pointer. And hand only applies to IE...................................................................................................................... ......................................................................................................................... ......................................................................................................................... ................. here it is! Let's take a look at each browser's detailed questions!
1. CSS style for Firefox IE6 IE7
Now most are used!important to hack, for IE6 and Firefox test can display normally, but IE7 to!important can correctly explain, will cause the page did not display as required!   Find a good IE7 for the hack Way is to use "*+html", now with IE7 browsing, there should be no problem. Now write a CSS to do this: #1 {color: #333;}/* Moz * * HTML #1 {color: #666,}/* IE6 */*+html #1 {color: #999;}/* IE7 * /Then in Firefox the font color is displayed as #333,ie6 under the font color displayed as #666,ie7 under the font color displayed as #999.
2. Centering problem in CSS layout
The main style definitions are as follows:
body {text-align:center;} #center {margin-right:auto; Margin-left:auto; }
Descriptiondefines the text-align:center in the parent element, which means that the content within the parent element is centered, and the setting for IE is already available. Can't center in Mozilla. The solution is to add "Margin-right:auto" when the child element is defined; Margin-left:auto; " in order to, if you want to use this method to make the entire page to center, it is recommended not to set in a div, you can sequentially split the div, in each of the split Div defined margin-right:auto; Margin-left:auto; You can do it.
3. Different interpretations of models
#box {width:600px;//for ie6.0-width:500px;//for ff+ie6.0} #box {width:600px ! Important//for FF width:600px; for ff+ie6.0 width/**/:500px; For ie6.0-}
4. Double the distance generated by the floating IE
#box {float:left; width:100px; margin:0 0 0 100px; In this case IE6 will produce 200px double distance display:inline; Make floating Ignore}

Here Block,inline two elements, the block element is characterized by: always start on the new line, height, width, row height, the margin can be controlled (block elements), the characteristics of the inline element is: and other elements on the same line,... Uncontrollable (inline element); #box {display:block;//can simulate a block element display:inline for inline elements;//Achieve the effect of the same row arrangement diplay:table;

IE does not recognize the definition of min-, but in fact it treats the normal width and height as a condition of min. This problem is big, if only with the width and height, the normal browser of these two values will not change, if only with Min-width and min-height, ie, the following is not set width and height. For example, to set the background image, this width is more important. To solve this problem, you can:
#box {width:80px; height:35px;}

Html>body#box {width:auto; height:auto; min-width:80px; min-height:35px;} Note the style order position here (very important!) )
6, the minimum width of the page
Min-width is a handy CSS command that allows you to specify that the element should be minimal or less than a certain width, so that the layout is always correct. But IE doesn't recognize this, and it actually puts width as the minimum width. In order for this command to work on IE, you can put a <div> into the <body> tab and assign a class to the div: then the CSS is designed like this:
#container {min-width:600px; Width:expression (Document.body.clientWidth < 600?) "600px": "Auto");}
The first min-width is normal, but the width of line 2nd uses JavaScript, which only IE recognizes, which also makes your HTML document less formal. It actually achieves the minimum width by JavaScript's judgment.
7. Clear Floating
. hackbox{display:table;//Display the object as a block-element-level table} or. hackbox{clear:both;}
or join: After (pseudo-object), set what happens after the object, usually in conjunction with content, IE does not support this pseudo-object, non-IE browser support, so does not affect the Ie/win browser. This is the most troublesome ...
#box: after{content: "."; display:block; height:0; clear:both; visibility:hidden;} "Recommended for use"
8, div floating IE text generated 3 pixels of the bug
The left object floats, the right side is positioned with the left margin of the outer patch, and the text within the right object is spaced 3px away from the left. (IE6 problem)
#box {float:left; width:800px;} #left {float:left; width:50%;} #right {width:50%;} *html #left {margin-right:-3px;//This sentence is key} HTML code <div id= "box" > <div id= "left" ></div> <div id= "right "></div></div>
9, attribute selector (this is not considered compatible, is a bug to hide CSS)
p[id]{}div[id]{}
This is for IE6.0 and IE6.0 the following versions are hidden, the FF and Opera action attribute selector and sub-selectors are still different, the range of the sub-selector is reduced from the form, the range of the property selector is larger, such as P[id], all P tags have the same type of ID.
10, ie hide and seek problems
When the div application is complex, there are some links in each column, and the div is prone to hide-and-seek problems. Some content does not show up when the mouse selects this area is found content is indeed on the page.
Workaround:Use the Line-height property for #layout or use fixed height and width for #layout. The page structure is as simple as possible.
11, height is not suitable
Height intolerance is when the height of the inner object changes, the outer height cannot be automatically adjusted, especially when the inner object uses margin or paddign. Cases:<div id= The contents of the "box" > < P>p object </p> </div> CSS: #box {background-color: #eee;} #box p {margin-top:20px;margin-bottom:20px; text-align:center;}
Workaround:Add 2 empty div object CSS code to the P object:. 1{height:0px;overflow:hidden;} Or add the border attribute to the Div.
after looking forward to continue ...

Compatibility to explore a