DIV + CSS is compatible with IE6/7 and Firefox's perfect solution

The tutorials for helping customers (www.bkjia.com) have become a common issue about CSS compatibility with various browsers. The tutorials on the Internet are all over the world. the following content is not too novel and is purely personal summary. I hope it will be helpful to 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 .)

Reference content is as follows:
<Style>
# Wrapper
{
Width: 100px! Important;/* IE7 + FF */
Width: 80px;/* IE6 */
}
</Style>

2, IE6/IE77 for FireFox

Reference content is as follows:
* + 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]
Add the following code to Global CSS and add class = "clearfix" to the div to be closed.

Reference content is as follows:
<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>

• 6 pages in total:
• Previous Page
• 1
• 2
• 3
• 4
• 5
• 6
• Next Page