首页 > 代码库 > css兼容性问题总结
css兼容性问题总结
1.先谨记以下规则，但不推荐使用hack.
所有浏览器通用（市面上主要用到的IE6IE7FF） height:100px;
IE6专用 _height:100px;
IE6专用 *height:100px;
IE7专用 *+height:100px;
IE7、FF共用 height:100px!important;
2.CSS兼容
以下两种方法几乎能解决现今所有兼容.
(1)!important(不是很推荐，用下面的一种感觉最安全)
随着IE7对!important的支持,!important方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)
代码:
<style>
#wrapper{
width:100px!important; /*IE7+FF*/ 火狐 IE7浏览时是宽100px;
width:80px; /*IE6*/ IE6浏览时是宽80px;
}
</style>
(2)IE6/IE77对FireFox<from针对firefoxie6ie7的css样式>
*+html与*html是IE特有的标签,firefox暂不支持.而*+html又为IE7特有标签. *上面第一点指明
代码:
<style>
#wrapper{width:120px;}/*FireFox*/
*html#wrapper{width:80px;}/*ie6fixed*/
*+html#wrapper{width:60px;}/*ie7fixed,注意顺序*/
</style>
注意:
*+html对IE7的兼容必须保证HTML顶部有如下声明：
代码:
<!DOCTYPE HTML PUBLIC“-//W3C//DTD HTML4.01 Transitional//EN””http://www.w3.org/TR/html4/loose.dtd“>
3.其他兼容技巧(相当有用)
1,FF下给div设置padding后会导致width和height增加,但IE不会.(可用!important解决)
2,居中问题.
1).垂直居中.将line-height设置为当前div相同的高度,再通过vetical-align:middle.(注意内容不要换行.)
2).水平居中.margin:0auto;(当然不是万能) 虽然不是万能但见识有限，未能知道那个浏览器不适合此方法，知道的朋友指教！
3,若需给a标签内内容加上样式,需要设置display:block;(常见于导航标签，本人尝试过错误，padding如何设置padding-left都无效,其实原理就是使a标签像div一样以块元素定义）
4,FF和IE对BOX理解的差异导致相差2px的还有设为float的div在ie下margin加倍等问题.
5,ul标签在FF下面默认有list-style和padding.最好事先声明,以避免不必要的麻烦.(常见于导航标签和内容列表)(好的习惯是文件开头设置好)*{margin:0;padding:0;} *不提倡这样用，各个写明好点。
6,作为外部wrapper的div不要定死高度,最好还加上overflow:hidden.以达到高度自适应.(自适应高度本人习惯使用：尾部添加<div style="clear:both;">)
7,关于手形光标.cursor:pointer.而hand只适用于IE.贴上代码:
8、IE6的双倍边距BUG
<styletype=”text/css”>
body{margin:0}
div{float:left;margin-left:10px;;height:200px;border:1pxsolidred}
</style>
浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline 这个是经典就不说了。
css兼容性问题总结