程序博客网 > 搜索引擎优化规则

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

来源：互联网 发布：搜索引擎优化规则 编辑：程序博客网 时间：2024/05/01 19:56

前面的话

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

 

HTML识别

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

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

　　[1]IE9-(<!--[if 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>
复制代码

 

　　[2]仅单一IE(<!--[if IE 6]><![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 7]><div class="box" id="box"></div><![endif]--></body></html>
复制代码

 

　　[3]大于 gt ||  大于等于 gte || 小于 lt || 小于等于 lte(<!--[if gte IE 8]><![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 gte IE 7]><div class="box" id="box"></div><![endif]--></body></html>
复制代码

 

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

0 0
搜索引擎优化规则 搜索引擎优化规则
原创粉丝点击
热门IT博客
angular数据双向绑定angular数据双向绑定
mac 64位ndkmac 64位ndk
淘宝直播 在哪
斜屋面几分水算法
小米2s能用3g网络吗
python 3.7
各运营商 网络制式
淘宝毛绒玩具店铺介绍
管理合同的软件
文登考研怎么样 知乎
pccillin云安全软件
金门炮弹菜刀店淘宝
骇战网络暴力
java中文是什么意思
php jquery ajax实例
卖les衣服的淘宝商城
怎样使用通达信软件
淘宝数据包上传
淘宝旺旺联系代码
linux bind 配置
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 行政诉讼程序流程图 现代企业管理流程图 资产管理系统流程图 新手坐动车详细流程图 2018新农合异地住院报销流程图 库管员的工作流程 石岩纹绣培训学校 贪婪洞窟暴力吸血流加点图 小东西罐满h不准流出来 公主罐满h不准流出来 花丸晴流 广州市流花路附近住宿 广州流花路附近宾馆 广州市流花路附近酒店 广州市流花路 酒店 流苏树价格 什么是流苏树 流苏树图片欣赏 流苏围巾怎么围 格子流苏围巾 半身流苏裙 包臀流苏裙 蕾丝白裙 紫色纱裙 蕾丝裙底 大姨妈流血块 姨妈流血块 经期流血块怎么回事 药流流血块 怀孕流血块是什么原因 痔疮流血块是怎么回事 来月经流血块是怎么回事 来例假流血块 流行歌唱法 流行歌名 歌曲流行 流行的歌曲 流行新歌 经典流行歌曲 现在流行歌曲 歌曲流行歌曲

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里