浏览器兼容性问题是指不同浏览器的内核(渲染引擎和js引擎)对同一段代码解析的差异,造成页面显示效果的不统一的情况。
浏览器内核有 Triden(IE内核)、Gecko(火狐内核)、Webkit(苹果、谷歌内核)、Blink(谷歌、opera内核)。
国内浏览器没有自己的内核,都集成别人的内核来用。所以现在考虑的浏览器兼容性,都是考虑五大浏览器:IE、Safari、chrome、Firefox、Opera的兼容性问题。
对于css3新属性或者新属性值,可以加特定的浏览前缀。
例如:transform:rotate(-30deg)
IE(我用的是edge版本): -ms-transform:rotate(-30deg)
Safari/chrome: -webkit-transform:rotate(-30deg)
Firefox: -moz-transform:rotate(-30deg)
Opera: -o-tranform:rotate(-30deg)
备注:我刚测试了,直接写transform:rotate(-30deg).上面所有的浏览器都支持。
由于css3和h5 推出有好几年了,各个浏览器功能的支持会越来越全面。但是在开发的时候怎么知道哪些属性浏览暂时不支持?在网上有人推荐Modernizr.js 这个用来检测浏览器支持情况的JavaScript库,官方网止:http://modernizr.cn/。
chrome对css3 和h5 支持的情况: html类里面出现的类名余“no-”开头的代表不支持这个属性、功能或者标签。
IE8 对css3 和h5 支持的情况
(未完,在忙其他的。有时间在补)
参考:
http://blog.csdn.net/chuyuqing/article/details/37561313
http://blog.csdn.net/yimuqing123/article/details/53012549