Web page: A universal approach to perfect compatibility ie6/ie7/ff

Web pages about CSS compatibility with each browser has been a cliché, the network of tutorials everywhere. The following content is not too novel, purely personal summary, I hope to have some help for beginners.

First, CSS HACK
The following two methods can solve almost all hack today.

1,!important

With the support of IE7 to!important, the!important method is now targeted only at IE6 hack. (Note the wording. Remember that the claim position 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 is not supported. And *+html is IE7 unique label.
<style>
#wrapper
{
#wrapper {width:120px}/* FireFox/*
*html #wrapper {width:80px}////* IE6 fixed */
*+html #wrapper {width:60px}//* IE7 fixed, note order * *
}
</style>

Attention:
*+html to IE7 hack 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 closure (very important!)

The principle of clear float can be found in [how to clear floats without structural Markup]
Add the following code to the global CSS, to the need to close the div plus class= "clearfix" can be, once and for all.
<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 (wordy again)

1, under the FF to the DIV set padding will cause the width and height increase, but IE will not. (Available!important solution)
2, center problem.
1). vertically centered. Set the line-height to the same height as the current Div, and then pass the Vertical-align:middle. (Note that the content is not wrapped.)
2). Horizontally centered. margin:0 Auto; (certainly not omnipotent)
3, if you need to add a style to the contents of a label, you need to set display:block (common to navigation tags)
4, FF and IE on the BOX understanding of the difference between the 2px is also set for float div in IE under the margin doubling and so on.
5, the UL label below the FF default has List-style and padding. It is best to make a statement beforehand to avoid unnecessary trouble. (Common in navigation labels and content lists)
6, as an external wrapper div do not set dead height, preferably plus overflow:hidden. To achieve a high degree of adaptability.
7, about the hand-shaped cursor. Cursor:pointer. And hand only applies to IE.

P.S As for IE5 and other browsers there is no need to juggle. It's not worthwhile to spend time on it.