兼容性问题--HTML+CSS

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

兼容性问题有哪些？

1、IE6下怪异盒模型

　　　标准盒模型：总宽度=width+padding+border

　怪异盒模型：总宽度=width

2、IE6下最小高度问题

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

　　 IE6下块元素高度小于19px，会被当做19px来处理

　解决办法 ：

　　1、overflow:hidden 推荐

　　2、font-size: 0;

3、IE6下不支持1px的点线

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }

　　IE6不支持一像素的点划线，用背景图代替

4、IE6下内容会把父级的高度撑开

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

　　IE6下内容会把父级的高度撑开

解决办法

overflow: hidden;

5、IE6下只支持给a标签添加伪类

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }

　　IE6不支持除了a标签以外标签的伪类

6、IE6、7下不支持给块标签加display:inline-block

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }

　　IE67不支持块元素display:inline-block

7、IE8以及IE8以前的浏览器都不支持opacity

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

　　IE8以及IE8以前的浏览器都不支持opacity

解决办法

　　用filter

8、IE6不支持固定定位

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }

　　IE6不支持固定定位，可以用js来解决

9、IE6下前面元素浮动，后面元素不浮动后他们之间会有间隙

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

　　IE6下前面元素浮动，后面元素不浮动后他们之间会有间隙

　解决办法

　　给后面元素也添加浮动

10、IE6下双边距问题

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

　　IE6下块元素有浮动，并且有横向margin(左右)，那最终的距离是原来的两倍

解决方法

　　 给元素添加display:inline;

11、IE67下父级有边框，子级有margin的话会不起作用

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

　　在IE67下，父级有边框，子级有margin，那子级的margin会不起作用

解决办法

　　触发父级的layout

12、IE6下，每行元素的宽度与父级的宽度相差超过2px，最后一行的margin-bottom会失效（IE7不管相差多少，直接失效）

　　IE6下，每行元素的宽度与父级的宽度相差超过2px，最后一行的margin-bottom会失效

IE7下，不管宽度相差多少，直接失效

　　 解决方法：

　　用padding解决

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

13、IE6下元素中除了文字之外，还有inline-block类型元素，元素的行高会失效

　　在IE6下，元素中除了文字之外，还有inline-block类型元素，那元素的行高会失效

解决办法： 分别包起来，分别设置行高

14、IE6下文字溢出的问题

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

　　在IE6下，两个浮动元素中间有注释或者空行内标签，父级的宽度和子元素宽度相差小于3px，元素内的文字会被复制出来

解决办法

1、把注释或者行内元素用div包起来

3、把父级的宽度加3px

15、IE67li间隙问题

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

　　IE67下，li里有左右浮动的元素，会造成每个li下边有间隙的问题

解决办法

1、给li加vertical-align: middle;

2、给li浮动

16、IE67下子级有相对定位，并且比父级要大。那父级overflow:hidden;后是包不住它的

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

　　IE67下子级有相对定位，并且比父级要大。那父级overflow:hidden;后是包不住它的

解决办法

给父级也加相对定位

17、IE6下同一层级的浮动元素会盖住绝对定位元素

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

　　　 IE6下同一层级的浮动元素会盖住绝对定位元素

　　 解决办法

　　 给定位元素外面嵌套一个层

18、IE6下定位父级的宽高是奇数的话，元素的right值或者bottom值会有1px的偏差

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }

　　在IE6下，定位父级的宽高是奇数的话，元素的right值或者bottom值会有1px的偏差

19、IE6下通过margin负值，使元素移出父级的位置，那出去的部分会被截掉

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

　　　　IE6下通过margin负值，使元素移出父级的位置，那出去的部分会被截掉

　　 解决方法

　　 　　给元素添加相对定位，或者给父级overflow:hidden;

20、IE67下输入类型的表单控件，上下两边各有1px的间隙

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

　　IE67下输入类型的表单控件，上下两边各有1px的间隙

解决办法

　　给控件加浮动

21、IE8以及IE8之前不识别H5标签

　　　　解决办法：不使用

22、IE6不支持png透明图片

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }

　　　　IE6不支持png-24透明图片

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }