css浏览器的兼容性问题总结

测试浏览器html5的渲染能力

测试网站：(http://www.html5test.com)

Hack

Hack就是针对不同的浏览器去写不同的css颜色，从而让各个浏览器能达到一致的渲染效果。

HTML Hack

<!--识别 ie6,7,8 -->
<!--[if lte IE 8]>
自定义html内容
<![endif]-->


<!--如果是版本是IE6-->
<!--[if IE6 6]>
自定义HTML内容
<![endif]-->

上述代码可以在IE6,7,8可以识别自定义的html内容，而IE9，IE9+，chrome等浏览器则识别为注释.
lte 表示less than or equal 小于等于
lt 表示 小于
gt 表示大于
gte 表示大于等于

CSS值Hack

IE6 专用的“hack”符号 就是短横、下划线

div{
	width:200px;
	height:200px;
	background:red;
	/*IE6 识别*/
	_background:blue;
	-background:blue;
	/*IE6  IE7识别  常用符号 ? $  & * 等  */
	!background:blue;
	$background:blue;
	/*IE8 IE9 唯一识别*/
	background:blue\0/;
	/*IE6 IE7 IE8 IE9  IE10 识别*/
	background:blue\9;
}

CSS 选择器 Hack

/* IE6 写法*/
* html div{
	width:200px;
	height:200px;
	background:red;
}
/* IE6 IE7 写法*/
div,{
	width:200px;
	height:200px;
	background:red;
}
/* 除了IE6 写法*/
 html>body div{
	width:200px;
	height:200px;
	background:red;
}

IE6的兼容性问题

选择器的兼容问题

IE6 不支持连续类的交集选择器。.haha.cur{color:red;} 改成标签开头即可.li.cur{color:red;}

盒模型的兼容性问题

不支持小于一个文字高度的盒子

任何浏览器都有默认字号，IE6的默认字号是14px,所有小于字号的盒子都不能正常渲染，高度不能小于字号。解决办法：就是给IE6设置一个盒子的字号，字号比height小就行了，一边来说是0.

.box{
 height:5px;
 _font-size:0;
}

浮动的兼容性问题

IE6解决浮动的方法：出发IE6的haslayout机制。

div{
	border:10px solid red;
	overflow:hidden;
	_zoom:1;
}

双倍margin

问题描述： 连续多个元素浮动，浮动的方向和margin方向相同，最后一个，最开头一个都有可能出现双倍的margin.
解决办法：如果父子元素之间有空隙，一定要用父元素的padding,不要用子元素的margin

3px bug

问题描述：两个盒子，左边盒子浮动，右边盒子没有浮动，那么两个盒子之间会有3px的空隙。
解决办法： 左边盒子 _margin-right:-3px;

扫描二维码关注公众号，回复： 10948407 查看本文章

定位兼容问题

问题描述： IE6 不支持 固定定位 position:fixed;
解决办法：用js模拟固定定位

文字样式的兼容问题

问题描述：IE6,7,8中，所有有超级链接的图片，都默认有一个蓝色边框
解决办法：img {border:none;}