CSS Compatibility solutions

What is compatibility?

The same Web page, under different browsers (IE6, IE7, IE8) The display effect is inconsistent, that is, "CSS is incompatible."

IETester can simultaneously test IE5.5, IE6, IE7, IE8 These versions of the Web page effects.

Ways to resolve CSS compatibility

1. The importance of CSS global settings
2. A summary of common CSS compatibility
3. CSS HACK ( deprecated)

Settings for CSS Global styles

1. Clear the inner padding and margins of all labels in the page

???? Body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form, Input,p, th,td{margin:0;padding:0}

2. Bullets

???? Ul,ol,li{list-style:none;}

3. Picture border

???? Img{border:none;}

4. Super Link

???? a:link,a:visited{color:# 004276;text-decoration:none;}

???? A:hover{text-decoration:underline;color: #ba2636;}

5. Uniform setting of text color, size, line height and background color in Body Web page

???? Body{font-size:12px;font-family:simsun, "song Body"; background: #fff; color: #2b2b2b}

6. Various headings

h1{padding:11px 0 0; margin-bottom:4px;font:normal 20px/30px blackbody; text-align:center;}

H2 {padding:6px 0 0; margin-bottom:4px; font:normal 20px/30px blackbody; text-align:center;}

H3{FONT-SIZE:12PX}

H4{font-size:12px;font-weight:normal}

7. Common Font Color

????. Red{color: #FF0000;}

????. Blue{color: #0000ff;}

????. Gray{color: #808080;}

???? ......

8. Clear and float

????. Floatl{float:left;}

????. Floatr{float:right;}

????. Clear{clear:both;}

????. Blank10{height:10px;clear:both;}

?

Common CSS compatibility issues

1, any browser to implement the home page center

???? The home page in IE is centered, using the Text-align:center

???? In Firefox, the home page is centered, using the margin:0px auto;

body{

???? Background: #ccc URL (... /images/bg-body.gif) Repeat-x;

???? font-size:12px;

???? Color: #444;

???? font-family: "Song Body";

???? Text-align:center; center under/*ie * /

}

Ul,li{list-style:none;}

A:link,a:visited{color: #444; text-decoration:none;}

A:hover{color: #FF0000;}

. Clear{clear:both;}

. box{width:960px; margin:0px Auto;text-align:left; }

?

2, the container, single-line content Vertical Center

????. title{height:30px; line-height:30px;}

3, IE6, element floating, so that margin doubled

. div1{

???? width:200px;

???? height:100px;

???? border:1px solid #006600;

???? margin:50px;

???? Float:left;

???? display:inline; * * Convert block elements to inner elements * /

???? _margin-left:25px; /* IE6 can identify */

}

4, IE6, the definition of 1px high container

. box{

???? height:1px;

???? Background-color: #006600;

???? Overflow:hidden; */* out of the part is hidden * /

}

?

5. The type of the unified cursor

. header. logo. div3{width:358px;height:107px;float:right;padding-top:15px; Cursor:pointer; }

CSS HACK (deprecated)

For different browsers, the process of writing CSS code is called CSS HACK.

(1) Hack of CSS Properties

????????. box{

Background-color: #FF0000; All browsers support

*background-color: #00FF00; IE6 and IE7 Support

_background-color: #0000FF; IE6 Support

}

(2) CSS selector hack (see it)

????????. Box{background-color: #FF0000;}//All browsers are recognized

???????? *+html . box{ *background-color: #00FF00;}//ie7 can identify

???????? *html . box{ _background-color: #0000FF;}//ie6 can identify

CSS Compatibility solutions