浏览器兼容--CSS hack

由于不同厂商的浏览器,比如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;就行了

基本常用的就这么多,后面遇到问题再补充

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容