9、兼容性

兼容性：页面在不同的浏览器中的显示可能会有所不同

1.在IE6下，子级的宽度会撑开父级设置好的宽度
    Tips：盒子模型的计算一定要精确，否则IE浏览器可能会显示不同

2.在IE6下，元素浮动如果宽度需要内容撑开，需要给里面的块元素都添加浮动才可以

3.在IE6、7下元素要通过浮动排在同一排，就需要给这行元素都加浮动

4.标签的嵌套规则，p标签内不能嵌套块级标签

5.在IE6下，如果高度小于19px，就会被自动设置成19px
    解决方法：就是overflow：hidden，把超出部分隐藏

6.在IE6下边框样式是不支持1px的dotted样式的
    解决方法：切背景平铺

7.在IE下父级有边框的时候，子元素的margin会失效
    解决方法：就是触发父级的haslayout属性，例如使用zoom:1;等方法。
    原因：在IE6、7、8下，因为有haslayout属性，所以经常造成兼容性上的问题，尽量去触发haslayout属性，可以减少很多IE下的兼容性问题

8.IE6下的双边距的bug，在IE6下块元素有浮动有横向的margin的值得时候，margin的值会扩大两倍。
    解决方法：display：inline;

9.在IE6、7下，li本身没有浮动，li里面的内容有浮动，li下会产生一个间隙。
    解决方法：给li加浮动 或者 给li加vertical-align:top;

10.第9个问题和第5个问题同时存在的情况下，vertical-align:top;这个方法就不起作用了，只能使用添加浮动的方法处理。

11.IE6下，当一行子级元素宽度之和和父级的宽度相差超过3px，或者子级元素不满行的情况的时候，最后一行的子级元素的margin-bottom会失效
    解决方法：暂无避免方法，只能避免子级元素宽度之和和父级的宽度相差超过3px

12.IE6下存在文字溢出的bug，子元素的宽度和父级的宽度如果相差小于3px，两个浮动元素中间有注释或者内联元素，就会出现文字溢出，内联元素越多，溢出就越多
    解决方法：用块标签把注释的或者内联元素包裹起来。

13.IE6下当浮动元素和绝对定位元素是兄弟关系的时候，绝对定位会失效
    解决方法：不让浮动元素和绝对定位元素是兄弟关系，用其他标签嵌套，降一级，即可

14.在IE6、7下，子级元素有相对定位，父级overflow包不住子级元素
    解决方法：给父级也加相对定位

15.在IE6下，如果绝对定位的父级宽高是奇数的时候，子级元素的right和bottom值会与1px的偏差

16.在IE6下，如果使用固定定位，那么固定定位的位置会错误，并且不会固定显示，会随滚动而移动

17.在IE6、7、8下，想要设置透明度，opacity不会生效，要使用filter: alpha(opacity=[0~100]);的命令，所以想要兼容就要opacity和filter都写

18.在IE6、7下，输入型表单标签控件上下会有1px的间隙
    处理方法：给input加浮动

19.在IE6下，PNG24格式的图透明通道不兼容，自动用白底替换透明通道
    解决方法：使用第三方js文件:DD_belatedPNG_0.0.8a.js文件即可解决

兼容IE的时候，也可以使用IE下的判断语句，来做css样式文件的针对性引入或者针对性设置
    <!- -[if ie]>
    <![endif]- ->

    <!- -[if ie 6]>
    <![endif]- ->

    <!- -[if ie 7]>
    <![endif]- ->

    <!- -[if ie 8]>
    <![endif]- ->

css hack:
    \9       IE10之前的IE浏览器解析代码
    +或者*    表示IE7和7以下的浏览器
    _        表示IE6和6以下的浏览器