浏览器兼容性适配方法总结（跨浏览器）

最新推荐文章于 2024-06-07 10:17:37 发布

LingDong Jey

最新推荐文章于 2024-06-07 10:17:37 发布

阅读量6.8k

点赞数 4

分类专栏：前端技术

原文链接：https://blog.csdn.net/

版权

前端技术专栏收录该内容

9 篇文章 0 订阅

订阅专栏

浏览器兼容性问题适配，通过单独写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>

LingDong Jey

关注

4
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
浏览器兼容性适配方法总结（跨浏览器）

浏览器兼容性问题适配，通过单独写css样式，适配各类浏览器兼容性，特别是针对IE8-9。1-1.条件性注释（Conditional comments）[只有IE9及以前版本支持]引入语法：在css里使用如下标识符可以被ie识别而采用，其他浏览器会忽略if ie。<!--[if...
复制链接

扫一扫