由于代码写的不规范,或者不正确导致的错误,就叫做错误,不是兼容性问题。
当我们写了一段正确的代码,但是在不同浏览器下,产生的一些不正确的解析,就叫做兼容性问题。
HasLayout:ie渲染引擎中的一个属性,用来调节元素的渲染模式,让我们把换个属性值设为TRUE的话,这个元素就根据自身内容的大小或者父级大小,来重新计算自己的宽高, 有个问题就是子集比父级大,会撑开父级,清浮动 阻止margin 传递(相关详细请百度)
在IE6下
1.子元素宽高超出父级宽高,可以把父级设置好的宽高撑开
占位宽 = content+padding+border+margin
2.块属性元素的高度,小于19px的时候,高度会按照19px来处理,子级会撑开父级,最小高度19,设置行高为0,还有2px偏差
解决办法:overflow:hidden;
3.在IE6中,1px的点线会显示成虚线
解决办法:用图片代替
4.给边框加transparent的时候,边框会显示。例如用边框做三角形的时候
解决办法:border-style设置成虚线
5.父级有边框的话,可能会造成子元素的margin失效
解决办法:触发hsalayout
6.给元素添加zoom ,元素会支持宽高,加*这条样式只在IE7及之前的浏览器识别
7.双边距,快元素有浮动,有横向的margin,横向的margin会被放大两倍
margin-left 一行元素左侧第一个元素有双边距
margin-right一行元素右侧第一个元素有双边距
解决办法:display:inline
8.一行元素的宽度之和,和父级相差超过3像素,最后一行元素下margin失效
9.元素的宽度和父级宽度相差,小于3像素,并且两个浮动之后,之间有注释或者内联元素,元素内容会被复制
解决办法:用div把注释或者内联包起来
10当浮动元素和绝对定位元素是同级关系的话,并且浮动元素的占位宽度和父级小于3像素,绝对定位元素可能会消失掉或者错位。
解决办法:把绝对定位元素单独抱起来
11.父级宽高如果是奇数的话,元素的right和bottom会有1像素偏差
12.不支持固定定位
13输入型表单控件 border:none:无效
解决办法:border:0;或者重置input的背景
14.不支持png-24的图片透明
15.如果在!important下边再加一条同样的样式,会破坏掉!important。然后按照默认的优先级顺序显示样式
16.通过margin负值,是元素移除父级区域,会被父级截掉
解决办法:给元素加相对定位
在IE 6,7中
1.不支持给快标签加inline-block
解决办法:在inline-block下多加样式*display:inline;*zoom:1;
2.(伪类兼容)link ,visited,hover,active这些只支持给a标签添加
解决办法;用js
3.浮动元素的父级设置了固定宽度的话,不需要清浮动
4.没有BFC属性(bfc在本站可以搜到详细)
5.li本身没有浮动,但是li的内容都浮动了,或者有两个以上的浮动,下边会有几个像素的间隙
解决办法:
1)给li也加浮动
2)给li加vertical-align:top
6.子元素有相对定位的话,父级的overflow包不住
解决办法:给父级也加相对定位
7.不支持border-spacing这个样式
解决办法:
1)border-collapse:collapse;
2)cellspacing
8.输入型表单空间input上下各有1像素间隙
解决办法:给input加浮动
9.输入型的表单空间,输入文字的时候,背景图片会随着文字一起移动
解决办法:给背景图加父级
在IE6 , 7 , 8中
1.不设置文档声明,页面就会进入怪异盒模型解析
1)标准盒模型:
width/height = content 可视宽/高= content+padding + border;
2)怪异盒模型;
width/height = 可视宽/高 content = width – padding – border
2.h5新曾标签都不支持,没有宽高或者样式,或变为内联标签
解决办法:用js创建这个标签,然后display:block;
3.不支持opacity
解决办法:filterL:alpha(opacity = 40)
在chrome下
1.文字大小小于12px的时候,会被当作12px来处理
解决办法:用图片代替