浏览器兼容性问题适配,通过单独写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" 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: #FF0000\9; /*IE8及以上的浏览器会显示红色 测试8-10都显示红色*/
background-color: #ff6600\0; /*IE8及以上的浏览器会显示橙色 测试8-11都显示橙色*/
*background-color: #0066FF; /*IE6、IE7会变为蓝色 测试5、7蓝色*/
+background-color: #FFFF00; /*IE6、IE7会变为黄色 测试7黄色*/
_background-color: #009933; /*IE6会变为绿色 测试 5绿色*/
}
</style>