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