html测试兼容的网站,html+css网站的兼容性测试及解决方法（Compatibility testing and solution of html+css website）.doc...

htmlcss网站的兼容性测试及解决方法(Compatibilitytestingandsolutionofhtmlcsswebsite)

html+css网站的兼容性测试及解决方法(Compatibility testing and solution of html+css website)

Compatibility testing of web pages

1, check compatibility between browsers

IE6-IE10, Firefox, et al

2. Verify compliance with W3C standards

You can use some of the following methods for testing.

1, Dreamweaver

2, validator.w3.org officially conducts online verification

Solving browser compatibility issues

For different browsers, write the corresponding CSS style code, so that browsers only explain themselves can identify CSS style code. These style codes are called "CSS hack"".

The idea of writing CSS hack is to prepare CSS style code for each browser according to the special symbol of the browser "identification".

CSS hack mode for mainstream browsers

Firefox does not support special symbols. "Important!""

After the IE8 \0 statement, before the semicolon. Such as: padding:5px; padding:0px\0;

IE7 + statement or label before. Such as: p{width:55px}; +p{width:60px;}

IE6 _ + statement or tag. Such as: width:80px; _width:60px;

Example：

#mydiv{

Padding:5px; /*firefox*/

Padding:10px\0; /*IE8*/

+padding:15px; /*IE7*/

_padding:20px; /*IE6*/

}

* the order of writing is usually Firefox first, then IE8, or IE7, and IE6 must be last.

If statements supported by various versions of IE

IE6 < < --[if IE 6.0]>IE6 HTML code < < [endif]-->

IE7 < < --[if IE 7.0]>IE7 HTML code < < [endif]-->

IE8 < < --[if IE 8.0]>IE8 HTML code < < [endif]-->

concrete problems

1, three pixel text slow down problem

Scene: IE6, followed by an inline element after the floating (float) element, there is a gap of 3 pixels between the two.

Solution: set the inline element for IE6 separately: _margin-left:-3px;"

Note that if you do not declare that the document type is XHTML, Transitional, or Strict, all IE versions will have this bug.

The code reads as follows:

solves IE6's 3 pixel slow shift bug

Body{margin:0px; padding:0px; font-size:13px;}

#container{width:400px; height:150px; background:yello