*兼容性问题1:不同浏览器的标签默认的margin和padding不同
使用:写几个标签,在不加样式控制的前提下,不同浏览器各自的margin和padding差异较大
解决:在CSS里面添加 *{margin: 0; padding: 0;}
注:这个是最常见也是最容易解决的一个浏览器的兼容新问题,所以几乎所有的CSS文件开头都会使用通配符*来设置各个标签的margin和padding为0
*兼容性问题2:IE6双边距bug,块级标签浮动(float)后,又有横向的margin的情况下,在IE6显示margin比设置的大
使用:#box{ float:left; width:10px; margin:0 0 0 100px;}
,这种情况下IE会产生20px的距离
解决:在float的标签样式中加入 _display: inline;
,将其转为行内属性
注:display前面的_
这个符号只有IE6会识别
*兼容性问题3:png24位的图片在iE6浏览器上出现背景
解决:做成PNG8,或者可以引用一段脚本处理
*兼容性问题4:特殊标记识别浏览器,CSS hack
标识符\9
将IE浏览器分离出来,+
将IE6、7、8分离出来,_
将IE6分离出来
.a {
background-color:#2222; /*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff; /*IE6、7识别*/
_background-color:#1e0bd1; /*IE6识别*/
}
*兼容性问题5:获取自定义属性问题
IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()来获取自定义属性,FireFox下,只能通过getAttribute()来获取自定义属性
解决: 统一使用getAttribute()来获取自定义属性
*兼容性问题6:IE下,event对象有x,y属性,没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性!
*兼容性问题7:Chrome中文界面下会默认将小于12px的文本强制按照12px显示
解决: 在css中加入 -webkit-text-size-adjust: none;
注意:但是,在chrome更新到27版本之后就不可以用了。可以尝试用缩放来处理(但是不好用)
*兼容性问题8:超链接访问过后hover样式不再出现
问题:被点击过的超链接样式不再具有hover和active
解决:改变css属性的排序,用LVHA
a:link {} a:visited {} a:hover {} a:active {}
*兼容性问题9:漏写DTD(文档类型定义)声明
问题:漏写DTD声明,Firefox会按照标准模式来解析网页,但是IE会出发怪异模式,
解决:使用H5写法,头部声明 <!DOCTYPE html>
*兼容性问题10:上下margin重合问题
问题: IE和Firefox都存在,相邻的两个div的margin-left和margin-right不会重合,但是margin-top和margin-bottom会发生重合
解决: 同时使用margin-top或者同时使用margin-bottom
还有min-height不兼容,透明度的不兼容等等~~