浏览器兼容性问题，主要针对IE6~7

浏览器兼容性问题，主要针对IE6~7

问题1：H5标签兼容性问题 <header><section><footer>等，利用以下方法

　　1、三个标签在IE下不会创建，可以利用JS使用document.createElement方法来创建该内联元素，再将标签的display属性设置为block转换为块元素即可显示正常。

　　2、调用成熟的js文件，<script src="js/html5shiv.js"></script>来调用html5shiv.html

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

问题3：第一块元素浮动,第二块元素加margin值等于第一块元素的宽度,在IE6下会有间隙问题;

　　1、不建议这么写

　　2、直接使用浮动float解决

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

　　不要让子元素的宽高度超过父级

问题5、p标签包括块元素嵌套规则 <!--p td hn三个标签不能嵌套块元素-->

问题6、margin兼容性问题：margin-top传递，上下margin叠加问题

　　1、margin-top传递：触发BFC，haslayput

　　2、上下margin叠加：尽量使用同一方向上的margin（margin有四个方向）

问题7、display:inline-block：出来的比较晚，ie6不兼容 display前加*，zoom前加*

问题8、IE6 最小高度问题，默认为19像素

　　加上overflow:hidden;

问题9、IE6 双边距

　　针对IE6~7添加display:inline-block;

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

　　针对IE6~7，添加vertical-align:top;

问题11、两个浮动元素中间有注释或者内联元素并且和父级宽度相差不超过3px

　　1、两个浮动元素中间避免出现内联元素或者注释

　　2、与父级宽度相差3px或以上

问题12、IE6~7 父级元素的overflow:hidden包不住子级的relative

　　给父级元素添加相对定位

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

　　避免父级宽高出现奇数

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

　　可以添加<p></p>等元素使他们不同级

问题15、IE6 下input的空隙

　　给input元素添加float

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

　　给背景图片添加fixed值使其固定

问题17、PNG24图片兼容性问题

　　1、添加一个封装JS：DD_belatedPNG_0.0.8a.滤镜js，再利用函数DD_belatedPNG.fix('元素名')来实现，但是不能处理body上的png24

　　2、给元素添加CSS原生滤镜：_background:none;_filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src="XX.png", sizingMethod="crop");

另外：

css hack，在CSS属性前加以下：

\9 ：对所有IE10以及之前浏览器有效

* ：对所有IE7以及之前的浏览器有效

_ ：对所有IE6以及之前的浏览器有效

样式优先级： 默认 < 类型 < class < id < 行间style < !important