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 }