CSS完美兼容IE6IE7FF通用方法.docVIP

CSS完美兼容IE6IE7FF通用方法 关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一、CSS HACK HACK概念： 不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack, HACK规则： IE都能识别*;标准浏览器(如FF)不能识别*； IE6能识别*，但不能识别 !important, IE7能识别*，也能识别!important; FF不能识别*，但能识别!important; IE6 IE7 FF * √ √ × !important × √ √ 浏览器优先级别:FFIE7IE6,CSS hack书写顺序一般为FF IE7 IE6 例： 　　以: #demo {width:100px;} 为例; 　　 #demo {width:100px;} 　　 * html #demo {width:120px;} 　　 *+html #demo {width:130px;} 　　 --------------- 　　 所以最后,#demo的宽度在三个浏览器的解释为: 　　FIREFOX:100px; 　　 ie6:120px; 　　 ie7:130px;以 下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) style #wrapper { width: 100px!important; width: 80px; } /style 2, IE6/IE77对FireFox *+html 和 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签. style #wrapper { #wrapper { width: 120px; } *html #wrapper { width: 80px;} *+html #wrapper { width: 60px;} } /style 注意: *+html 对IE7的HACK 必须保证HTML顶部有如下声明： !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN　/TR/html4/loose.dtd 二、万能 float 闭合 关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup] 将以下代码加入Global CSS 中,给需要闭合的div加上 class=clearfix 即可,屡试不爽. style .clearfix:after { content:.; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } .clearfix {display:block;} /style 三、其他兼容技巧 1. ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。所以先定义ul{margin:0;padding:0;}就能解决大部分问题。也可用!important解决 2. 居中问题. 1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.) 2).水平居中. margin: 0 auto;(当然不是万能) 你可以把html的body之内任何项目置于中，该项目将自动获得相等的左右边界值从而保证了居中显示。不过，这在IE6之前版本的浏览器中仍然有问题，将不会居中，因此必须修改如下： body { text-align: center; } #content { text-align: left; width: 700px; margin: 0 auto; } 对body的设定将导致主体内容居中，但是连所有的文字也居中了，这恐怕不是你想要的效果，为此#content 的div还要指定一个值：text-align: left 3.