浏览器兼容处理(HTML条件注释、CSSHack和JS识别)
2015-09-20 16:29
736 查看
前面的话
本文中所有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好的代码像粥一样，都是用时间熬出来的
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- XML 数据请求与JSON 数据请 4000 求
- JS之dom操作getAttribute()方法
- JS之dom操作getAttribute()方法
- TouchSlide.1.1.js 参数
- js事件知识整理
- Javascript学习笔记【第四章】
- JSP之response对象使用
- 深入分析JS原型链以及为什么不能在原型链上使用对象
- 浅谈 Underscorejs中 _.throttle 和 _.debounce 的差异和使用场景
- JavaScript的函数作用域与作用域链详解
- javaScript简单教程之一
- javascript中的原型链，prototype与__proto__的关系
- Underscore.js使用
- mobilebone.js使用笔记
- js笔记:匿名函数
- Javascript构造函数与prototype
- JS学习总结之基础
- javascript 一次开发，多平台运行
- js == 和 ===
- JavaScript 中的算术运算