浏览器兼容性问题，主要针对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

转载于:https://www.cnblogs.com/likaopu/p/5263392.html