CSS is perfectly compatible with general methods of IE6, IE7, and FF (for your reference)

CSS compatibility with various browsers is already a common issue, and tutorials on the Internet are everywhere. The following content is not too novel. It is a personal summary and I hope it will be helpful for beginners.

I. CSS hack

The following two methods can solve almost all today's hack.

1 ,! Important

With IE7! Important Support ,! The important method is only for the hack of IE6. (note the writing method. Remember to advance the declaration position .)
<Style>
# Wrapper
{
Width: 100px! Important;/* IE7 + FF */
Width: 80px;/* IE6 */
}
</Style>
2, IE6/ie77 for Firefox

* + HTML and * HTML are unique tags of IE, which are not supported by Firefox at the moment. * + HTML is also a unique tag of IE7.
<Style>
# Wrapper
{
# Wrapper {width: 120px;}/* Firefox */
* Html # wrapper {width: 80px;}/* IE6 fixed */
* + Html # wrapper {width: 60px;}/* IE7 fixed, pay attention to the Order */
}
</Style>Note:
* + The HTML hack for IE7 must ensure that the following statements are made on the top of the HTML:
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" http://www.w3.org/tr/html4/loose.dtd">

 

2. Universal float Closure

For details about the principle of clear float, refer to [How to clear floats without structural markup]
Set the followingCodeAdd class = "Clearfix" to the DIV to be closed in global CSS.
<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>

 

Iii. Other compatibility skills

1. Setting padding for Div under FF will increase the width and height, but IE will not. (available! Important solution)
2. center problem.
1). Vertical center. Set line-height to the same height of the current Div, and then use vertical-align: middle. (Note that do not wrap the content .)
2). horizontal center. Margin: 0 auto; (of course not omnipotent)
3. To add a style to the content of tag a, set display: block)
4. The difference between FF and IE in understanding box leads to the 2px difference. There are also issues such as Div set to float and margin doubling under IE.
5. UL labels are listed-style and padding by default under ff. It is recommended to declare them in advance to avoid unnecessary troubles. (commonly seen in navigation labels and content lists)
6. Do not set the height of the external wrapper Div. It is best to add overflow: hidden to achieve highly adaptive.
7. about hand-shaped cursor. cursor: pointer. And hand only applies to IE.