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

最新推荐文章于 2022-10-17 11:08:56 发布
最新推荐文章于 2022-10-17 11:08:56 发布
阅读量94 收藏
点赞数
原文链接：http://www.cnblogs.com/wymbk/p/5504492.html
版权

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

 

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]IE7-(特性节点的specified属性)

　　IE7-浏览器中，获取特性节点将获得包括内置特性的所有特性，第0个特性节点是onmsanimationiteration，且其specified属性是false。而IE8+及其他浏览器仅仅可以获得经过设置的特性节点，且specified属性永远是true

function lteIE7(obj){
    var temp = obj.attributes[0];
    return (Boolean(temp) && !temp.specified);
}

 

　　[2]IE8-(document.createElement)

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

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

 

　　[3]IE10-(document.all)

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

 

　　[4]IE10-(activeXObject)

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

 

　　[5]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

 

 

转载于:https://www.cnblogs.com/wymbk/p/5504492.html

HTML中属性问题以及通信问题总结
鸭绒的博客
10-08 524
文章目录一、属性问题1.“data-xxx ”属性的作用是什么？2.href 和 src的区别3. 锚点的作用是什么？如何设置锚点4.页面导入样式时，使用link和@import有什么区别？5. script标签的defer和async属性的区别6. 网页中 meta标签中viewport的具体参数使用7. 怎样处理移动端1px被渲染成2px的问题二、通信问题1.如何实现浏览器内多个标签页之间的通信？2.websocket如何兼容低版本浏览器三、其它1.网页制作会用到哪些图片格式2.如何写出高性能的HTML
css hack--浏览器兼容性问题
Ryan的博客
06-12 1569
css hack–浏览器兼容性问题 写css样式的时候，恐怕最头疼的就是各个浏览器下的兼容性问题，即css hack，不同的浏览器对css的解析结果是不同的，因此会导致相同的css输出的页面效果不同，这就需要css hack来解决浏览器局部的兼容性问题。使用css、 hack将会使用你的css代码部分失去作用，然后借助条件样式，使用其原css代码在一些浏览器解析，而css hack代码在符合条件要...
HTML详细教程
qq_40046544的博客
10-17 8676
HTML 是网页使用的语言，定义了网页的结构和内容。浏览器访问网站，其实就是从服务器下载 HTML 代码，然后渲染出网页。HTML 的全名是超文本标记语言（HyperText Markup Language），上个世纪 90 年代由欧洲核子研究中心的物理学家蒂姆·伯纳斯-李（Tim Berners-Lee）发明。它的最大特点就是支持超链接，可以跳转到其他网页，从而构成了整个互联网。1999 年，HTML 4.0.1 发布，成为广泛接受的 HTML 标准。
[HTML]第二节HTML样式
数据库天地
02-20 84
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;
浏览器模型
xianjs的博客
03-14 2003
浏览器模型一.浏览器模型概述代码嵌入网页的方法script 元素嵌入代码defer 属性async 属性脚本的动态加载window.self，window.windowwindow.frames，window.lengthwindow.frameElementwindow.top，window.parentwindow.statuswindow.devicePixelRatio位置大小属性组件属性...
HTML 全局属性概览与兼容性
assassin_0302的博客
02-27 197
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes List of global attributes：   事件处理程序属性： onabort，onautocomplete，onautocompleteerror，onblur，oncancel，oncanplay，oncanplaythrough...
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自动化...
html5指南--1.html5全局属性（html5 global attributes）
weixin_33943836的博客
09-04 139
　　今天开始一个全新的关于html5系列课程，是我读《The Definitive Guide to HTML5 》的学习笔记。我会把自己觉得里面不错的章节，或者有意义的内容进行整理，以供大家学习。 　　一个元素可以定义自己的属性，比如a标签定义href属性，这种叫局部属性（local attribute）。相对应的我们可以通过全局属性（global attribute）为所有元素设置共有的行为...
1-HTML元素 属性 格式化
张鹿鹿的专栏
08-21 1427
HTML元素 HTML的属性 HTML的格式化 HTML元素1, 指的是从开始标签到结束标签的所有代码 开始标签 元素内容 结束标签 ＜p＞ this is my web page ＜/p＞ ＜br/＞ HTML 元素的语法: 2, 元素的内容时开始标签与结束标签的内容 空元素在开始标签中进行关闭 大多数HTML预算可拥有属性3, 嵌套的HTML元素
概述和HTTP请求与响应处理
热门推荐
weixin_30375427的博客
12-08 6万+
1、概述 　　爬虫，应该称为网络爬虫，也叫网页蜘蛛人，网络蚂蚁等 　　搜索引擎，就是网络爬虫的应用者 2、爬虫分类 　　通用爬虫： 　　　　常见就是搜索引擎，无差别的收集数据，存储，提交关键字，构建索引库，给用户提供搜索接口 　　　　爬取一般流程： 　　　　　　1、初始一批URL，将这些URL放到待爬的队列 　　　　　　2、从队列取出这些URL，通过DNS 解析IP ，对...
Python爬虫【urllib模块】
Strive_0902的博客
11-14 6万+
通用爬虫 爬虫的一般流程 1 初始化一批URL，将这些URL放入队列 2 从队列中取出这些URL，通过DNS解析IP，对IP对应的网站下载HTML页面，保存到本地服务器中，爬取完的URL放到已爬取队列。 3 分析这些网页得内容，找出网页里面得其他关心的URL连接，继续执行第2步，知道爬取条件结束 搜素引擎如何获取一个新网站的URL 1 新网站主动提交搜索引擎 2 通过其它网站页面中设置的外链 ...
HTML属性说明
08-16 289
HTML elements can have attributes, which contain additional information about the element. HTML元素可以具有属性，其中包含有关该元素的其他信息。 HTML attributes generally come in name-value pairs, and always go in the openin...
HTML DOM Attribute 对象属性方法 小结
T的博客
12-29 616
       虽然写这个博客主要目的是为了给我自己做一个思路记忆录，但是如果你恰好点了进来，那么先对你说一声欢迎。我并不是什么大触，只是一个菜菜的学生，如果您发现了什么错误或者您对于某些地方有更好的意见，非常欢迎您的斧正！ 学习来源：http://www.w3school.com.cn/jsref/dom_obj_attributes.asp HTML DOM 节点 在 HTML DOM （...
Amazon S3：S3静态网站托管教程.docx
最新发布
11-12
Amazon S3：S3静态网站托管教程.docx
基于支持向量机SVM-Adaboost的风电场预测研究附Matlab代码.rar
11-12
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
浏览器兼容性解决：IE条件注释的使用与好处
"本文主要介绍了如何在网页中创建Internet Explorer（IE）条件注释，以解决浏览器兼容性问题，特别是针对IE6的挑战。作者强调解决问题应先从HTML结构和CSS样式入手，避免轻易使用hack手段，并提倡在必要时才使用条件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值