在开发中难免会遇到CSS的兼容问题,特别是IE这个臭蛋蛋,今天正好有时间,就整理一下平时遇到的CSS兼容问题以及解决方案.

<!DOCTYPE HTML>文档类型的声明

  • IE6中如果没有书写这个文档说明,就会进入怪异模式解析现象.

解决方法:

  • 在文件开头写此说明

横向双倍外边距

  • IE6中块元素浮动后,会出现横向双倍margin现象

解决方法:

  • 在float标签的样式控制中加入display:inline

IE6最小height值19px

  • IE6中即使设置 height:10px,在IE6中也会是19px

解决方法

  • CSS中加入overflow:hidden

img外部的border

  • IE6,7中,img外部有a标签,即img标签有链接时,会产生边框.

解决方法

  • CSS样式中使用border:none

IE6中的透明度设置

  • 设置透明度时,常常使用rgba()opacity 来设置,但是,臭蛋蛋不支持.

解决方法

  • CSS样式中添加 filter:alpha(opacity=50) ,但是此时 opacity的值是1-100的值.

:hover的兼容

  • IE6:hover,:link,:visited ,:active 只能给 a标签 使用.并且不支持其他伪类.

解决方法

  • 增加 zoom:1的属性

<style>
*{
    margin: 0;padding: 0;
}
a:hover em{
    color: blue;
}
a:hover{
    zoom: 1;   增加  触发 IE6 下就好用了
}
</style>
</head>
<body>
    <a href=""> <span>hello <em>颜色</em> world</span></a>
</body>

关于CSS Hack

  • _width--只有IE6支持

  • *width --IE6,7 支持 ,常用

  • +width --IE6,7 支持


sdbxpjzq
150 声望3 粉丝

人生就像写代码,每一次成长就是一次更新,每一次收获就是一个迭代。所以...得写好代码,写好人生(就算现在写不出好的代码,可至少有一颗迭代的心),付出才可能有回报。