浏览器兼容处理(HTML条件注释、CSSHack和JS识别)

前面的话

　　本文中所有IEx+代表包含x及x以上；IEx-代表包含x及x以下，仅个人习惯。例:IE7+代表IE7、IE8……
　　本文中所有例子全部经过测试，欢迎交流。

HTML识别

条件注释法(IE10+已经不支持条件注释)

　　【注意】两个--和左中括号[之间不能有空格，否则无效

[1]IE9-()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
.box{
    height: 100px;
    width: 100px;
    background-color: red;
}
</style>
</head>
<body>
<!--[if IE]>
<div class="box" id="box"></div>
<![endif]-->
</body>
</html>

[2]仅单一IE()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
.box{
    height: 100px;
    width: 100px;
    background-color: red;
}
</style>
</head>
<body>
<!--[if IE 7]>
<div class="box" id="box"></div>
<![endif]-->
</body>
</html>

[3]大于 gt || 大于等于 gte || 小于 lt || 小于等于 lte()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
.box{
    height: 100px;
    width: 100px;
    background-color: red;
}
</style>
</head>
<body>
<!--[if gte IE 7]>
<div class="box" id="box"></div>
<![endif]-->
</body>
</html>

[4]非IE(IE10+也能识别)，此处多加的<-->，在IE中被当作内部注释，而在非IE浏览器中会闭合之前的注释(<![endif]-->)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
.box{
    height: 100px;
    width: 100px;
    background-color: red;
}
</style>
</head>
<body>
<!--[if !IE]><-->
<div class="box" id="box"></div>
<![endif]-->
</body>
</html>

CSS hack

【1】属性前缀法(只有IE支持)

　　[1]IE6-(下划线、中划线)(_color:blue;-color:blue;)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
.box{
    height: 100px;
    width: 100px;
    _background-color: red;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
</body>
</html>

　　[2]IE7-(星号、加号)(*color:blue;+color:blue;)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
.box{
    height: 100px;
    width: 100px;
    *background-color: red;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
</body>
</html>

　　[3]IE10-(\9)(color:blue\9;)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
.box{
    height: 100px;
    width: 100px;
    background-color: red\9;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
</body>
</html>

　　[4]IE8+(\0)(color:blue\0;)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
.box{
    height: 100px;
    width: 100px;
    background-color: red\0;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
</body>
</html>

　　[5]IE9、IE10(\9\0)(color:blue\9\0;)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
.box{
    height: 100px;
    width: 100px;
    background-color: red\9\0;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
</body>
</html>

【2】选择器前缀法

　　[1]IE6-(*html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
*html .box{
    height: 100px;
    width: 100px;
    background-color: red;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
</body>
</html>

　　[2]IE7(*+html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
*+html .box{
    height: 100px;
    width: 100px;
    background-color: red;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
</body>
</html>

　　[3]IE8(@media \0)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
@media \0{
    .box{
        height: 100px;
        width: 100px;
        background-color: red;
    }
}
</style>
</head>
<body>
<div class="box" id="box"></div>
</body>
</html>

　　[4]IE9+及其他非IE浏览器(:root)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
:root .box{
    height: 100px;
    width: 100px;
    background-color: red;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
</body>
</html>

　　[5]firefox(x:-moz-any-link,)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
x:-moz-any-link,.box{
    height: 100px;
    width: 100px;
    background-color: red;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
</body>
</html>

　　[6]chrome、safari、opera(@media screen and (-webkit-min-device-pixel-ratio:0))

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .box{
        height: 100px;
        width: 100px;
        background-color: red;
    }
}

</style>
</head>
<body>
<div class="box" id="box"></div>
</body>
</html>

JS识别

【1】能力检测

　　【补充1】使用JS能力检测的注意事项，以检测sort排序为例

function isSortable(object){
    return !!object.sort;
}

　　上面这个函数通过检测对象是否存在sort()方法，来确定对象是否支持排序。但问题是任何包含sort属性的对象也会返回true

var result = isSortable({sort:true});

　　检测某个属性是否存在并不能确定对象是否支持排序，更好的方式是检测sort是不是一个函数

function isSortable(object){
    return typeof object.sort == "function";
}
//上面的typeof操作符用于确定sort的确是一个函数，因此可以调用它对数据进行排序

　　【补充2】

　　　　[BUG]在IE中typeof xhr.open会返回"unkown"

if(window.ActiveXObject){
    var xhr = new ActiveXObject("Microsoft.XMLHttp");
    alert(typeof xhr.open)
}

　　　　[解决]在浏览器环境下测试任何对象的某个特性是否存在使用下面这个函数

function isHostMethod(object,property){
    var t = typeof object[property];
    return t == "function" || (!!(t == "object" && object[property])) || t== "unknown";
}

　　[1]IE8-(document.createElement)

　　IE8-的宿主对象是通过COM而非JScript实现的。因此，document.createElement()函数确实是一个COM对象，所以typeof才会返回"Object"

    if(typeof document.createElement == "Object"){
        alert(1)
    }

　　[2]IE10-(document.all)

    if(document.all){
        alert(1)
    }

　　[3]IE10-(activeXObject)

    if(window.ActiveXObject){
        alert(1)
    }

　　[4]chrome、opera(chrome)

    if(window.chrome){
        alert(1)
    }

【2】userAgent

　　[1]IE

function isIE(){
    var ua = navigator.userAgent;
    //检测Trident引擎，IE8+
    if(/Trident/.test(ua)){
        //IE11+
        if(/rv:(\d+)/.test(ua)){
            return RegExp["$1"];
        }
        //IE8-IE10
        if(/MSIE (\d+)/.test(ua)){
            return RegExp["$1"];
        }
    }
    //检测IE标识，IE7-
    if(/MSIE (\d+)/.test(ua)){
        return RegExp["$1"];
    }
}
console.log(isIE());//只有IE会返回版本号，其他浏览器都返回undefined

　　[2]chrome

function isChrome(){
    var ua = navigator.userAgent;
    //先排除opera,因为opera只是在chrome的userAgent后加入了自己的标识
    if(!/OPR/.test(ua)){
        if(/Chrome\/(\S+)/.test(ua)){
            return RegExp["$1"];
        }

    }
}
console.log(isChrome());//只有Chrome会返回版本号，其他浏览器都返回undefined

　　[3]safari

function isSafari(){
    var ua = navigator.userAgent;
    //先排除opera
    if(!/OPR/.test(ua)){
        //检测出chrome和safari浏览器
        if(/Safari/.test(ua)){
            //检测出safari
            if(/Version\/(\S+)/.test(ua)){
                return RegExp["$1"];
            }
        }
    }
}
console.log(isSafari());//只有safari会返回版本号，其他浏览器都返回undefined

　　[4]firefox

function isFireFox(){
    if(/Firefox\/(\S+)/.test(navigator.userAgent)){
        return RegExp["$1"];
    }
}
console.log(isFireFox());//只有firefox会返回版本号，其他浏览器都返回undefined

　　[5]opera

function isOpera(){
    var ua = navigator.userAgent;
    if(/OPR\/(\S+)/.test(ua)){
        return RegExp["$1"];
    }
}
console.log(isOpera());//只有opera会返回版本号，其他浏览器都返回undefined

时间： 2024-10-22 14:20:07

浏览器兼容处理(HTML条件注释、CSSHack和JS识别)的相关文章

浏览器兼容之条件注释,cssHack

对于形形色色的浏览器,随之而来的就是一些兼容问题,大多应该都是IE下的兼容问题,因为任何浏览器下出现渲染不一致都极有可能是我们自己的结构或样式不符合W3C的某些要求,或者说违背了浏览器的某些规则而先造成的,所以我们应该尽量通过结构或CSS的修改来达到各浏览器渲染一致效果! 条件表达式(注:条件注释只能用在IE5-IE9,因为微软已经在IE10以后的版本中已禁用IE特有的条件注释功能,详情见:https://msdn.microsoft.com/zh-cn/library/ie/hh801214%

ie的兼容方法，条件注释的方法

1.终极方法:条件注释    <!--[if IE 5.5]> 这段文字仅显示在 IE5.5. <

浏览器条件注释

原文链接:http://www.blueidea.com/tech/site/2006/3561.asp 浏览器的条件注释理论,用下面一段例子来解释这个问题 (X)HTML 下面一段代码是测试在微软的IE浏览器下的条件注释语句的效果: <!--

转:浏览器兼容

1.什么是 CSS hack CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果. 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果.简单的说,CSS hack的目的就是使你的CSS代码兼容不

浏览器兼容模式（转）

三种模式首先我们要知道,为什么会有这么多模式.其实这是个历史遗留问题,在浏览器大战时期,网景浏览器(Netscape Navigator)和微软的IE浏览器(Microsoft Internet Explorer)对网页分别有不同的实现方式,那个时候的网页要针对这两种浏览器分别开发不同的版本.而到了W3C制定标准之后,这些浏览器就不能继续使用这种页面了,因而会导致大部分现有站点都不能使用.基于这个原因,浏览器才引入两种模式来处理一些遗留的站点. 现在的浏览器排版引擎支持三种模式:怪异(Quir

用条件注释判断浏览器版本解决页面兼容问题

在IE8.IE9上可能好好的,当我们在IE6.IE7或者是其他的浏览器上再浏览这些页面时,可能会发现我们的页面已经面目全非了,那么如何解决兼容问题呢,本文就为大家一一道来对于浏览器兼容问题,我们应该碰到很多了,在平时写一些页面时,在IE8.IE9上可能好好的,当我们在IE6.IE7或者是其他的浏览器上再浏览这些页面时,可能会发现我们的页面已经面目全非了,作为一名前端开发人员,这是最让人发疯的问题了,那么我们该怎么解决这些问题呢? 首先,我们写的页面在不同的浏览器上之所以会出现表现不同的问题,是因

用条件注释判断浏览器版本,解决兼容问题

对于浏览器兼容问题,我们应该碰到很多了,在平时写一些页面时,在IE8.IE9上可能好好的,当我们在IE6.IE7或者是其他的浏览器上再浏览这些页面时,可能会发现我们的页面已经面目全非了,作为一名前端开发人员,这是最让人发疯的问题了,那么我们该怎么解决这些问题呢? 首先,我们写的页面在不同的浏览器上之所以会出现表现不同的问题,是因为不同的浏览器在解析页面时,他们所遵循的规则并不是完全相同的.比如IE,不同的版本解析都不同,何况是不同的浏览器厂商,不同的内核呢.但是我们在遇到兼容性问题时,应该首先检

使用条件注释完成浏览器兼容

最近做的纯PC站需要兼容到IE8,一般使用css hack就能够完成,但如果兼容到IE7及以下就很头疼了,使用条件注释动态加载脚本是个不错的选择. 注释不同的浏览器版本 : (1).支持所有的IE浏览器(不包括IE10标准模式)  (2).所有非IE浏览器(不包括IE10标准模式) 只有非IE浏览器显示(不包括IE10

Ie - 条件注释区分IE、非IE浏览器

条件注释判断浏览器在实际中经常使用,比如css样式,js文件的兼容等根据浏览器不同进行判断加载,感兴趣的朋友可以参考下 1.条件注释: IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,也是WEB设计中常用的一种hack方法. 条件注释的基本结构和HTML的注释(<!– –>)是一样的.因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们.IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容. IE浏览器的条件注