浏览器兼容性问题适配,通过单独写css样式,适配各类浏览器兼容性,特别是针对IE8-9。
1-1.条件性注释(Conditional comments)[只有IE9及以前版本支持]
引入语法:
在css里使用如下标识符可以被ie识别而采用,其他浏览器会忽略if ie。
<!--[if !IE]> 除IE外都可识别 <![endif]--><!--[if IE]> 所有的IE可识别 <![endif]--><!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]--><!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]--><!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]--><!--[if IE 6]> 仅IE6可识别 <![endif]--><!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]--><!--[if IE 7]> 仅IE7可识别 <![endif]--><!--[if lt IE 7]> IE7以下版本可识别 <![endif]--><!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]--><!--[if IE 8]> 仅IE8可识别 <![endif]--><!--[if IE 9]> 仅IE9可识别 <![endif]-->
引入示例:
//方式一:引入样式差异化<!--[if IE 6 ]><link rel="stylesheet" type="text/css" media="all" rel="external nofollow" href="./ie6.css" /><![endif]-->//方式二:页内差异化<!--[if IE 6]><style type="text/css"> /* 针对IE6定义的样式 */</style><![endif]-->//方式三:行内差异化<!--[if IE 7 ]> <html class="ie7"> <![endif]-->1-2.条件性注释效果如何适用于IE10/11上
可耐的中心:使用IE=EmulateIE9属性指示浏览器采用IE9渲染技术
IE9是支持条件性注释的。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">在html网页的head里加入上面的元标记,这样IE10/11就能识别条件性注释了,我们也就可以像IE6/7/8那样编写针对性的CSS代码了。但这样做有个弊端,很显然,浏览器这样就会才能IE9的渲染模式,而不是最新的IE10/11技术。
无聊的手套:使用媒体查询语句+-ms-high-contrast属性
CSS的媒体查询语句(media query)是一种高级的CSS条件语句,它能根据一些属性和属性值计算判断CSS是否可以生效。在这里,我们要使用一个IE10/11独有的属性,它就是-ms-high-contrast,只有IE10/11实现了这个属性,它可以有两个值active或none,使用下面的媒体查询语句:
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {/* IE10+ CSS styles go here */}
火狐浏览器、谷歌浏览器不能识别这个属性,所以不会执行这个查询语句里的CSS,从而实现了条件性执行的效果。
方法三:使用Javascript判断浏览器的类型
先用JavaSCript判断是否是IE浏览器,如果是,就在页面的<html>标记上添加一个“ie”的类名:
var ms_ie = false;var ua = window.navigator.userAgent;var old_ie = ua.indexOf('MSIE ');var new_ie = ua.indexOf('Trident/'); if ((old_ie > -1) || (new_ie > -1)) { ms_ie = true;} if (ms_ie) { document.documentElement.className += " ie";}
有了这个标志性css class后,我们就可以在CSS里区别性的编写css代码了。
.testClass{ /*这里写通用的css*/ }.ie .testClass{ /*这里写专门针对IE的css*/}
2.CSS hack【重点】
CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然,我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
语法参考表:
上图说明:这里S代表standard标准模式,Q代表Quirks怪异模式
示例:
<style type="text/css">.color{ background-color: #CC00FF; /*所有浏览器都会显示为紫色 */ background-color: #FF00009; /*IE8及以上的浏览器会显示红色 测试8-10都显示红色*/ background-color: #ff6600 ; /*IE8及以上的浏览器会显示橙色 测试8-11都显示橙色*/ *background-color: #0066FF; /*IE6、IE7会变为蓝色 测试5、7蓝色*/ +background-color: #FFFF00; /*IE6、IE7会变为黄色 测试7黄色*/ _background-color: #009933; /*IE6会变为绿色 测试 5绿色*/}</style>