浏览器兼容
全球五大浏览器:
IE, Chrome, FireFox, Opera, Safari.
百度统计:流量研究院。
IE8----win7 IE7----vista
IE9----win8 IE10----win10
高级浏览器:包括Chrome,qq,搜狗,百度等浏览器使用的都是webkit内核,一共占有市场份额 超过60%。 webkit内核度h5,c3的特性支持的很好。
- IE8及以下的浏览器:超过16%,用户群体也比较大,但低版本浏览器存在很严重的兼容问题,尤其是h5。
兼容性:
更多体现在对h5,c3的新特性支持上。
测试对h5新特性支持: https://www.html5test.com
关于css hack
实际工作中,只会上传同一份代码,提供给所有的用户进行下载,根据用户浏览器渲染效果不同,会出现兼容,为了解决兼容问题,需要在同一份代码中,书写不同的代码结构,加载给不同浏览器,实现相同的渲染效果。这种在同一份文件为不同浏览器书写不同html和css的方式就是hack。
- 1,html的hack
<!--IE9及以下可以看到-->
<!--[if lte IE 9]>
<h1>IE9及以下浏览器能看到</h1>
<![endif]-->
注意:IE浏览器的HTML的hack只设置到IE9版本,从IE10开始不管hack符怎么,都认为是注释。
用于给某个特定浏览器解决兼容问题。例如IE6中解决图片背景图片透明和半透明问题。
用于提示用户浏览器版本与要求是否相符合,设一个友情提示。
- 2,CSS的hack
css 的hack: 包含值的hack、选择器的hack。
IE6 hack符号:
- ,_
- 书写位置: 书写在某一条属性的属性名前面。表示这条属性只有IE6认识,其他浏览器不认识这个属性名。
-background: yellow;
IE7 及以下:
hack 符号: ! $ & * ( ) = % + @ 等等。
!background: yellow;
IE8 浏览器:
background: yellow\0/;
IE8/9/10浏览器:
background: yellow\0;
IE10及以下的IE浏览器都能正常加载:
background: yellow\9;
CSS 选择器 hack:
通过给选择器书写hack方式,只有一部分浏览器能够正常选中元素,其他浏览器认为没有这样的选择器。
IE6及以下:
* html div {
width: 100px;
height: 100px;
background: #c0c;
}
IE7及以下:
div, {}
IE8以上及高级浏览器: 并集选择器最后一个选择器后面一定不能加逗号,认为选择器书写错误。
IE7及以下:先把前面列举过的选择器选中元素加载样式
IE6浏览器不认识子级选择器和兄弟选择器,IE7不能忽视注释带来的效果。
/* Everything but IE 6 */
html > body .selector {}
/* Everything but IE 6/7 */
html > /**/ body .selector {}
head ~ /* */ body .selector {}