css 兼容性问题

1、H5标签兼容。

引入html5shiv.js

2、元素浮动之后,能设置宽度的话就给元素加宽度.如果需要宽度是内容撑开,就给它里边的块元素加上浮动。

3、第一块元素浮动,第二块元素加margin值等于第一块元素,在IE6下会有间隙问题。

解决：用float解决

4、IE6下子元素超出父级宽高，会把父级的宽高撑开。

解决：不要让子元素的宽高，超过父元素的宽高

5、p 包含块元素嵌套规则。

解决：不能嵌套块元素的标签，例：<div>

6、margin兼容性问题。

解决：
    1）、margin-top:传递
            触发BFC、haslayout。
            样式中加zoom:1;

    2）、上下margin叠压
            尽量使用同一方向的margin，比如都设置top,或者bottom;
            <div class="a b">  a｛top:10px;｝  b｛top:20px;｝

7、display:inline-block（IE6不兼容）。

解决：
    *display:inline;
    *zoom:1;

8、IE6 最小高度问题(IE6下最小像素19px)。

解决： *overflow:hidden;

9、IE6双边距（当元素浮动后再设置margin那么就会产生双倍边距。）。

解决： *display:inline;

10、li里元素都浮动 li 在IE6 7 下方会产生4px间隙问题。

解决： *vertical-align:top;

11、浮动元素之间注释，导致多复制一个文字问题。

解决：
    1）、两个浮动元素中间避免出现内联元素或者注释
    2）、与父级宽度相关3px或者以上

12、IE6 7 父级元素的overflow:hidden 是包不住子级的relative。

解决： 给父级加*position:relative;

13、IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和bottom值会有1px的偏差。

解决： 避免父级宽高出现奇数

14、IE6下绝对定位元素和浮动元素并列，绝对定位元素消失。

解决： 浮动元素和绝对定位元素是同级的话定位元素就会消失，所以咱们只要让他们俩不处于同级就可以避免这个BUG，加*display:inline;

15、IE6 下input的空隙。

解决： 给input元素添加float

16、IE6 下 输入类型表单控件背景问题。

解决： 设置background-attachment:fixed;

17、hack。

针对不同的浏览器写不同的CSS 样式的过程，就叫CSS hack!
background-colo:blue\9;         IE10以及IE10以下的
*background             IE7以及IE7以下的
_background             IE6及ie6的ie浏览器认识

18、IE6不支持png24 图片。

在body样式里

_background:none;
_filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src="XX.png", sizingMethod="crop");