测试浏览器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;
定位兼容问题
问题描述: IE6 不支持 固定定位
position:fixed;
解决办法:用js模拟固定定位
文字样式的兼容问题
问题描述:IE6,7,8中,所有有超级链接的图片,都默认有一个蓝色边框
解决办法:img {border:none;}