关于CSS中部分浏览器兼容性问题的解决

由于代码写的不规范，或者不正确导致的错误，就叫做错误，不是兼容性问题。

当我们写了一段正确的代码，但是在不同浏览器下，产生的一些不正确的解析，就叫做兼容性问题。

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来处理

解决办法：用图片代替