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

最新推荐文章于 2023-10-24 14:32:04 发布
最新推荐文章于 2023-10-24 14:32:04 发布
阅读量347 收藏
点赞数
文章标签： 浏览器兼容 css hack 页面注释 js

前面的话

　　本文中所有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
dragonlkl
关注
css hack--浏览器兼容性问题
Ryan的博客
06-12 1572
css hack–浏览器兼容性问题 写css样式的时候，恐怕最头疼的就是各个浏览器下的兼容性问题，即css hack，不同的浏览器对css的解析结果是不同的，因此会导致相同的css输出的页面效果不同，这就需要css hack来解决浏览器局部的兼容性问题。使用css、 hack将会使用你的css代码部分失去作用，然后借助条件样式，使用其原css代码在一些浏览器解析，而css hack代码在符合条件要...
IE各版本hack汇总
02-25
IE各版本hack汇总
浏览器兼容问题解决方案之一：条件注释
张木期的博客
05-29 240
普通的HTML注释形式是 <!-- 注释 --> 而IE5~IE9这5个版本的IE浏览器还另外支持一种特殊的if条件注释（感觉有点类似模板渲染时的语法结构） <!--[if IE]> html语句 <![endif]--> 这样在处理IE浏览器兼容性问题的时候就可以把hack代码集中在一块了，或者其他意想不到的用途 if条件注释分为三种形式 1、是否...
浏览器兼容之条件注释,cssHack
weixin_30642267的博客
07-12 143
对于形形色色的浏览器，随之而来的就是一些兼容问题，大多应该都是IE下的兼容问题，因为任何浏览器下出现渲染不一致都极有可能是我们自己的结构或样式不符合W3C的某些要求，或者说违背了浏览器的某些规则而先造成的，所以我们应该尽量通过结构或CSS的修改来达到各浏览器渲染一致效果！ 条件表达式（注：条件注释只能用在IE5-IE9，因为微软已经在IE10以后的版本中已禁用IE特有的条件注释功能,详情见:ht...
最全兼容性处理
前端-小张(qq:708819251 vx:zyj1c080)
11-03 1334
常见浏览器兼容性问题与解决方案 　　所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。 　　在学习浏览器兼容性之前，我想把前端开发人员划分为两类： 　　第一类是精确按照
HTML条件注释用法诠释
Haley_Guo的博客
04-27 1510
HTML条件注释用法诠释 注释内容以样式为例，如下： 1、支持所有IE浏览器 &lt;!--[if IE]&gt; &lt;link rel="stylesheet" href="all-ie-only.css" type="text/css"/&gt; &lt;![endif]--&gt; 2、支持非IE浏览器 &lt;!--[if !IE]&gt; &lt
CSS hack 兼容标识.rar_CSS hack 兼容标识
09-20
常见的CSS Hack方法包括属性前缀、特殊字符法、选择器Hack和条件注释等。 1. **属性前缀**：一些浏览器，如Firefox和Chrome，支持Webkit引擎特有的CSS扩展属性，如`-webkit-transform`用于旋转、缩放等。而IE浏览器...
ie10 css hack 条件注释等兼容方式整理
09-25
例如，IE浏览器支持`@cc_on`关键字，允许开发者在条件编译中使用JavaScript来实现特定版本的浏览器检测和处理。以下是一个使用`@cc_on`来为IE10添加特定类名的示例： ```html <!--[if!IE]><!--> if(/*@cc_on!@*/...
说说CSS Hack 和向后兼容(推荐)
09-25
在实际开发中，我们可以运用多种方法来实现向后兼容和CSS Hack的处理： 1. CSS选择器Hack是一种利用CSS规则和媒体查询的方式，为不同的浏览器定制不同的样式。例如，通过@media规则来为特定的浏览器写特定的样式。...
浏览器兼容解决FF/IE6/IE7背景专用CSS HACK
10-30
因此，建议尽量遵循W3C标准，使用浏览器前缀（如 `-webkit-`, `-moz-`, `-ms-`, `-o-`）来支持新特性，并结合条件注释或JavaScript进行更复杂的浏览器兼容性处理。 在实际开发中，可以使用工具如Autoprefixer自动化...
IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表
03-30
NULL 博文链接：https://helloklzs.iteye.com/blog/1305459
css-hack识别ie浏览器版本兼容
Jack94727的博客
04-20 495
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&gt; /*
IE系列兼容性hack大全
每天都记录一点点！
08-27 2892
ie hack css 兼容
关于IE hack问题
偏执
07-19 84
更多hack写法可根据实际项目需求来决定引用哪些或改变哪些，网上有很多js，支持IE8使用CSS3和HTML5，选择器和基本一些常用标签，只需引入js即可，省去了诸多工程和效果不美观等麻烦。IE8不支持H5和CSS3, 引入做兼容。html5.js 兼容html5标签。
12 个非常有用的 JavaScript Hacks
W Y L
04-05 199
1. 使用 !! 将变量转换为布尔值 有时我们需要检查一个变量是否存在或者是否是有效值。为了实现这个功能，你可以对变量应用使用 !! 操作符：!!variable，这可以把任何类型的值转换为布尔值，并且只有当这个变量的值为 0 / NULL / " " / NaN 的时候才会返回 FALSE，其他情况都返回 TRUE。为了方便理解，我们看看下面的例子： function Account(cash...
9 个极其强大的 JavaScript 技巧
最新发布
angelnotears的博客
10-24 120
所谓 hacker 方法，就是一种不断改进和迭代的构建方法。有着 hacker精神的程序员相信事物总有改进的余地，没有什么是完美的存在。每一段代码都有进一步优化的空间，每一个操作都有更便捷的技巧。
史上最全的CSS hack方式一览
923723914
09-28 2147
做前端多年，虽然不是经常需要hack，但是我们经常会遇到各浏览器表现不一致的情况。基于此，某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的，要知道一名好的前端，要尽可能不使用hack的情况下实现需求，做到较好的用户体验。可是啊，现实太残酷，浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协，虽然这只是个别情况。今天，结合自己...
IE下的hack
qinchaidaren的博客
12-07 337
对于前端开发来说IE一直是心里的痛，不管你觉得做的多好的网页，放到它上面总会有一些意想不到的问题发生，所以你不得不针对IE单独做些手脚,你就有必要知道一些IE浏览器下的hack写法。 比较常用的几个hack(目前大多公司都只要求兼容到IE8，稍微变态点的也就是IE7下没大的错位就行了，下面hack足以): \9 像如:width:6.5em;width:8em\9;在ie7-ie10宽
浏览器兼容性解决：IE条件注释的使用与好处
"本文主要介绍了如何在网页中创建Internet Explorer（IE）条件注释，以解决浏览器兼容性问题，特别是针对IE6的挑战。作者强调解决问题应先从HTML结构和CSS样式入手，避免轻易使用hack手段，并提倡在必要时才使用条件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值