由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 为了使CSS代码兼容不同的浏览器，有时候我们不得不使用CSS hack。
工作中经常用到的CSS hack：
1、针对IE浏览器
IE6~IE10都认识"\9"
比如：background-color: orange\9;在IE6、IE7、IE、8、IE9、IE10背景色都为橙色；
IE8~IE10都认识"\0"
比如：background-color: pink\0;在IE8、IE9、IE10背景色都为粉色；
IE6、IE7在属性前面加“+”
比如：+background-color: purple\0;在IE6、IE7背景色都为紫色；
IE6在属性前面加“_”
比如：_background-color: red\0;在IE6背景色都为红色；
微软官方推荐使用的IE浏览器专有的Hack方式。
2、Webkit内核浏览器（Safari和Google Chrome）
@media screen and (-webkit-min-device-pixel-ratio:0) {
.box {background: red;}
}
3、Firefox浏览器
@-moz-document url-prefix() {
.box2 { background: red; }
}
还有一个之前遇到的问题，在iPhone上overflow:scroll;滑动不顺畅
在overflow:scroll;后面再加一个-webkit-overflow-scrolling: touch;就行了
基本常用的就这么多，后面遇到问题再补充
网友评论