CSS兼容性问题
PC页面布局兼容
JS兼容问题
移动页面兼容问题
CSS兼容问题
.header {_width:100px;} /* IE6专用/
.header {+width:100px;} /* IE7专用/
.header {width:100px;} /* IE6、IE7共用/
.header {width:100px\0;} / IE8、IE9共用/
.header {width:100px\9;} / IE6、IE7、IE8、IE9共用/
.header {width:330px\9\0;} / IE9专用/
.element{
color:#000; /w3c标准/
[;color:#f00;]; /Webkit(chrome和safari)/
color:#666\9; /IE8/
color:#999; /IE7/
_color:#333; /IE6/
}
:root .element{color:#0f0\9;} /IE9/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (
-webkit-min-device-pixel-ratio:0) { .element{color:#336699;}} /opera/
@-moz-document url-prefix(){ .element{color:#f1f1f1;}} /Firefox/
PC页面兼容
1.如何让div层显示在flash 之上，给FLASH设置透明
<param name="wmode" value="transparent" >
2.IE6的3像素 bug：DIV浮动IE文本产生3象素的bug。左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距
3.双margin问题
4.盒模型的计算宽度不一样
5.li在IE中底部3像素的BUG（增加浮动解决问题）在ie6，ie7下
6.图片下方的空隙
JS兼容问题
事件绑定方式不一样
获取事件对象不一样
在IE中body对象要在<body>标签完全读入才会存在，而在FireFox中一开始就存在
在FireFox节点中没有removeNode方法，必须使用如下方法 node.parentNode.removeChild(node)
FireFox不支持元素的innerText属性，需用textContent
在FireFox中，自己定义的属性必须用getAttribute()方法获取，不能像在IE下直接获取
移动端页面兼容
页面屏幕大小兼容
流式布局新旧语法
添加前缀
在UC怎么解决的
网友评论