兼容性问题
hack技术。
根本:浏览器遇到不能解析的属性,会选择跳过。
*+<> IE6 7 能识别
— IE6 能识别
\9 IE6 7 8 能识别
\0 IE8 能识别
注释:尽量使用兼容性比较少的属性
IE6里面 浮动过后 设置margin-left 会出现双倍margin
解决方法: 设置display:inline 。加上浮动之后浏览器优先选择浮动,标签并不会变成行内元素。 但是能解决双倍margin问题。
IE6里面默认高度是 10px 所以设置高度小于10px,在ie6里面 会显示为默认的10px。
解决方法:设置标签属性 overflow:hidden或者设置 line-height。
子元素绑架父元素。子元素设置margin-top 父元素也会跟着移动(有边框的时候会阻止他们的重叠,只要不重叠就不会出现这种情况)。
解决方法:触发bfc,或者在子元素前面再加一个空的div高度为0,或者设置父元素的padding-top。
图片,行内元素排列的时候之间会有间距。
产生原因:代码换行的时候会产生空格,浏览器默认认为中间有空格
*解决方法:*float,或者font-size:0,或者用注释将空格注释掉。
因为min-height本身就是一个不兼容的CSS属性,所以设置min-height时不能很好的被各个浏览器兼容
解决方法:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px; height:auto !important;
height:200px; overflow:visible;}
透明度的兼容CSS设置
IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF:
opacity:0.6。
lt = <
gt = >
lte = <=
gte = >=
navigator.userAgent //浏览器版本信息。
IE6,不支持透明度问题。
推荐使用方法7。IE6 解决透明图片问题