前端兼容性问题整理

1、*ie6下子级宽度会撑开父级设置好的宽度。

方案：将子级元素的宽度设置为小于等于父级元素的宽度盒模型的计算一定要准确，否则在IE下会出现问题；

2、*IE6中，元素浮动：如果元素需要宽度进行撑开，需要给里面的子级元素都添加浮动才可以

3、*IE6的最小高度问题，

4、*IE6 下不支持1px的 dotted 边框样式切背景平铺

5、*IE6/7/8下，父级有边框的时候，子级的margin会失效，

方案：在IE下的大部分兼容性问题都是因为hasLayout属性触发的问题，尽量触发hasLayout可以减少IE的问题

hasLayout只在ＩＥ６／７/８中有，zoom 界面加载初始赔率，触发IE 中haslayout

6、在IE6下，！块元素有浮动并且横向有margin 的时候，横向的margin会扩大两倍!

方案：给块元素设置display:inline;

7、ie6/7下，li本身没有浮动，li里面的内容有浮动。li下会产生一个间隙

方案：给li设置浮动：float:left;或vertical-align:top/middle/bottom;

8、ie6下，最小高度的BUG和li的间隙问题共存的时候，使用vertical-align:top/middle/bottom;是无效的

方案：必须使用float:left;

9、在ie6下的文字溢出

子元素的宽度和父级的宽度如果相差小于3px的时候，两个浮动元素中间有注释或者内联元素的时候，就会出现文字溢出，内联元素越多，溢出越多

方案：用块元素标签把注释或者内联元素包裹起来

10、在IE6下，当浮动元素和绝对定位元素是兄弟的时候，绝对定位会失效

方案：不让浮动元素和绝对定位是兄弟，可以用div元素嵌套

11、在IE6/7下，子级元素有相对定位，父级overflow包不住子级元素

方案：给父级设置相对定位

12、ie6下，如果绝对定位的父级宽和高是奇数的时候，子级元素的right和bottom会有1像素的偏差

方案：跟美工商量，换偶数

13、ie6没有固定定位，只能用JS去模拟

14、ie不认识opacity

用：filter:alpha(opacity=0~100);

15、ie6/7下，输入表单控件上下会有1px的间隙

方案：给input加浮动

16、ie6不支持透明度的方式

方案：通过JS

17、

<!--[if ie]>

我是IE

<![end if]-->

18、css hack