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

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: html head title solves IE6s 3 pixel slow shift bug/title style Body{margin:0px; padding:0px; font-size:13px;} #container{width:400px; height:150px; background:yellow; zoom:1;} #div1{display:inline; colo