常用的样式兼容写法.docVIP

常用的样式兼容写法 margin-bottom:40px; /*ff的属性*/ 　　margin-bottom:140px\9; /* IE6/7/8的属性 */ 　　color:red\0; /* IE8支持 */ 　　*margin-bottom:450px; /*IE6/7的属性*/ +margin-bottom:450px; 　　_color:#ff0000; /* 只ie6支持 */ 　　#1 { color: #333; } /* FF环境 */ 　　* html #1 { color: #666; } /* IE6环境 */ 　　*+html #1 { color: #999; } /* IE7环境 */ 　　================================================== ============================== 　　三、CSS hack写法 　　书写顺序为FireFox在最前，其次是IE8、IE7，最后是IE6。 　　color:red;//所有浏览器 　　color:blue\9;//所有IE 　　+color:orange;//IE7 　　_color:green;//IE6 　　若浏览器为FireFox，那么color:red；若浏览器为IE8，根据CSS优先性原则，color:blue；若为IE7，color:orange；若为IE6，则color:green。 　　IE6识别 * 、_ 　　IE7识别 * 、+ 　　IE8识别 * 、\9,\0 　　FF什么都不识别 　　html 　　body 　　div style=border: 1px solid red; width: 300px; padding: 10px; 　　在Firefox中，div的完整宽度是padding+width，因此width: 300px; padding: 10px;的实际宽度是320px;而在IE6中，div的完整宽度是width，所以 　　这个div和下面的div宽度一致。 　　/div 　　div style=border: 1px solid red; width: 300px; 　　宽度为300px的div 　　/div 　　div style=border: 1px solid red; width: 280px !important; width: 300px; padding: 10px; 　　通过借助!important标记，可以设置Firefox中的width值为IE6中的width值减去padding值，这样就实现了Firefox与IE6的padding效果尺寸兼容。 　　/div 　　/body 　　/html 　　================================================== ================================ 　　DOCTYPE标准firfox与ie6 padding的问题 　　首先我们说说firefox和IE对CSS的宽度显示有什么不同： 　　其实CSS width 指的是标准CSS中所指的width的宽度，在firefox中的宽度就是这个宽度。它只包含容器中内容的宽度。而Internet Explorer width 　　则是指整个容器的宽度，包括内容，padding ，border。 　　Firefox中：容器占的宽度=内容宽度+padding宽度+border宽度 　　IE中：内容宽度=您定义的容器宽度(Internet Explorer width)-padding宽度-border宽度 　　所以，如果IE中定义 width:120px;padding:5px 的话，所显示的宽度就是120px. 　　即padding:5px是在width里面。 　　而Firefox中，上面这个定义，显示宽度就是 125 px; 　　所以，我们就必须这样定义 　　width:115px !important;width:120px;padding:5px; 　　必须注意的是， !important; 一定要在前面。 　　除了在不同的浏览器上会有这个问题，还有可能是在编码时引用了!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN 　　/TR/xhtml1/DTD/xhtml1-strict.dtd 　　这个头，他在ie浏览器下要支持w3标准，w3的padding和firfox标准相同，所以也会出现上面的情况 　　=======