- css渲染:从右往左。
test div{}这种类型的写法效率极低。
两个内联元素之间有空格
原理:inline-block元素把自己变成特殊的inline元素,对于相邻的元素来说表现出inline的特点,允许空格。对于内部元素来说表现出block元素的特点,可以设置高度和宽度。
消除空格方法:
.dib-wrap {
font-size:0;/* 所有浏览器 /
word-spacing:-1px;/ IE6、7 /
}
.dib-wrap .dib{
font-size: 12px;
letter-spacing: normal;
word-spacing: normal;
vertical-align:top;
}
@media screen and (-webkit-min-device-pixel-ratio:0){
/ firefox 中 letter-spacing 会导致脱离普通流的元素水平位移 /
.dib-wrap{
letter-spacing:-5px;/ Safari 等不支持字体大小为 0 的浏览器, N 根据父级字体调节/
}
}
.dib {
display: inline-block;
*display:inline;
*zoom:1;
}让IE6/IE7/IE8浏览器支持CSS3属性
使用behavior: url(ie-css3.htc);(支持部分)
限制:
1、当前元素一定要有定位属性,像是position:relative或是position:absolute属性。
2、z-index值一定要比周围元素的要高低版本IE兼容HTML5
<head>
<!-[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]->
</head>IE注释表达式
IE对注释进行了一定扩展,如下示例:
<!-[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]->
写法规则(gt代表大于,lt代表小于):
[if IE] 判断是否IE
[if IE 7] 判断是否是IE7
[if !IE] 判断是否不是IE
[if lt IE 5.5] 判断是否是IE5.5 以下版本。 (<)
[if lte IE 6] 判断是否等于IE6 版本或者以下 (<=)
[if gt IE 5] 判断是否IE5以上版本 (> )
[if gte IE 7] 判断是否 IE7 版本或者以上
[if !(IE 7)] 判断是否不是IE7
[if (gt IE 5)&(lt IE 7)] 判断是否大于IE5, 小于IE7
[if (IE 6)|(IE 7)] 判断是否IE6 或者 IE7