在开发中难免会遇到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
支持
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。