浏览器渲染页面的方式各不相同,甚至同一浏览器的不同版本(“杰出代表”是 IE)也有差异。因此,浏览器兼容成为前端开发人员的必备技能。如果有一份浏览器 Hack 手册,那查询起来就方便多了。这篇文章就向大家分享 Browserhacks 帮我们从网络上收集的各个浏览器特定的 CSS & JavaScript Hack,记得推荐和分享啊!
IE 选择器 Hack
1 2 3 | * html .selector {}
.suckyie 6 .selector {}
|
1 2 3 4 | *:first-child+html .selector {}
.selector, x:-IE 7 {}
*+html .selector {}
|
1 2 3 | html > body .selector {}
head ~ body .selector {}
|
1 2 3 4 5 | :root *> .selector {}
body:last-child .selector {}
body:nth-of-type( 1 ) .selector {}
body:first-of-type .selector {}
|
IE 属性/值 Hack
1 2 3 | .selector { _color : blue ; }
.selector { - color : blue ; }
|
1 2 3 | .selector { color : blue !ie; }
|
1 2 3 4 5 6 7 | .selector { ! color : blue ; }
.selector { $ color : blue ; }
.selector { & color : blue ; }
.selector { * color : blue ; }
|
1 2 3 | .selector { color : blue \ 0 /; }
|
1 2 | .selector:nth-of-type( 1 n) { color : blue \ 9 ; }
|
1 2 3 | .selector { color : blue \ 9 ; }
.selector { color : blue \ 9 ; }
|
1 2 | .selector { color : blue ; }
|
IE Media Query Hack
1 2 | @media screen and (min-resolution: + 72 dpi) {}
|
1 2 | @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none ) {}
|
1 2 | @media \ 0 screen\, screen \ 9 {}
|
1 2 | @media screen and ( min-width : 0 \ 0 ) {}
|
1 2 | @media screen and ( min-width : 400px ) {}
|
IE JavaScript Hack
1 2 3 | (checkIE = document.createElement( "b" )).innerHTML = "<!--[if IE 6]><i></i><![endif]-->" ;
var isIE = checkIE.getElementsByTagName( "i" ).length == 1;
|
1 2 3 4 | (checkIE = document.createElement( "b" )).innerHTML = "<!--[if IE 7]><i></i><![endif]-->" ;
var isIE = checkIE.getElementsByTagName( "i" ).length == 1;
navigator.appVersion.indexOf( "MSIE 7." )!=-1
|
1 2 3 | (checkIE = document.createElement( "b" )).innerHTML = "<!--[if IE 8]><i></i><![endif]-->" ;
var isIE = checkIE.getElementsByTagName( "i" ).length == 1;
|
1 2 3 | (checkIE = document.createElement( "b" )).innerHTML = "<!--[if IE 9]><i></i><![endif]-->" ;
var isIE = checkIE.getElementsByTagName( "i" ).length == 1;
|
1 2 | var isIE = eval( "/*@cc_on!@*/false" ) && document.documentMode === 10;
|
1 2 | var isIE = document.body.style.msTouchAction != undefined;
|
Firefox 浏览器
选择器 Hack
1 2 | body:empty .selector {}
|
1 2 | .selector, x:-moz-any-link {}
|
1 2 | .selector, x:-moz-any-link; x: default {}
|
1 2 | body:not(:-moz-handler-blocked) .selector {}
|
媒体查询 Hack
1 2 | @media screen and (min-resolution: + 72 dpi) {}
|
1 2 | @media screen and (-moz-images-in-menus: 0 ) {}
|
1 2 | @media screen and (min--moz-device-pixel-ratio: 0 ) {}
|
JavaScript Hack
1 2 | var isFF = !!navigator.userAgent.match(/firefox/i);
|
1 2 | var isFF = Boolean(window.globalStorage);
|
1 2 | var isFF = /a/[-1]== 'a' ;
|
1 2 | var isFF = ( function x(){})[-5]== 'x' ;
|
Chrome 浏览器
选择器 Hack
1 2 | ::made-up-pseudo-element, .selector {}
|
媒体查询 Hack
1 2 | @media screen and (-webkit-min-device-pixel-ratio: 0 ) {}
|
JavaScript Hack
1 2 | var isChrome = Boolean(window.chrome);
|
Safari 浏览器
选择器 Hack
1 2 3 | html[xmlns*= "" ] body:last-child .selector {}
html[xmlns*= "" ]:root .selector {}
|
1 2 | *|html[xmlns*= "" ] .selector {}
|
1 2 | ::made-up-pseudo-element, .selector {}
|
媒体查询 Hack
1 2 | @media screen and (-webkit-min-device-pixel-ratio: 0 ) {}
|
JavaScript Hack
1 2 | var isSafari = /a/.__proto__== '//' ;
|
Opera 浏览器
选择器 Hack
1 2 | *|html[xmlns*= "" ] .selector {}
|
1 2 | html:first-child .selector {}
|
1 2 | noindex:-o-prefocus, .selector {}
|
媒体查询 Hack
1 2 | @media all and ( min-width : 0px ){}
|
1 2 | @media all and (-webkit-min-device-pixel-ratio: 10000 ), not all and (-webkit-min-device-pixel-ratio: 0 ) {}
|
1 2 | @media screen and (min-resolution: + 72 dpi) {}
|
JavaScript Hack
1 2 | var isOpera = /^ function \(/.test([].sort);
|
1 2 | var isOpera = Boolean(window.opera);
|
浏览器渲染页面的方式各不相同,甚至同一浏览器的不同版本(“杰出代表”是 IE)也有差异。因此,浏览器兼容成为前端开发人员的必备技能。如果有一份浏览器 Hack 手册,那查询起来就方便多了。这篇文章就向大家分享 Browserhacks 帮我们从网络上收集的各个浏览器特定的 CSS & JavaScript Hack,记得推荐和分享啊!
IE 选择器 Hack
1 2 3 | * html .selector {}
.suckyie 6 .selector {}
|
1 2 3 4 | *:first-child+html .selector {}
.selector, x:-IE 7 {}
*+html .selector {}
|
1 2 3 | html > body .selector {}
head ~ body .selector {}
|
1 2 3 4 5 | :root *> .selector {}
body:last-child .selector {}
body:nth-of-type( 1 ) .selector {}
body:first-of-type .selector {}
|
IE 属性/值 Hack
1 2 3 | .selector { _color : blue ; }
.selector { - color : blue ; }
|
1 2 3 | .selector { color : blue !ie; }
|
1 2 3 4 5 6 7 | .selector { ! color : blue ; }
.selector { $ color : blue ; }
.selector { & color : blue ; }
.selector { * color : blue ; }
|
1 2 3 | .selector { color : blue \ 0 /; }
|
1 2 | .selector:nth-of-type( 1 n) { color : blue \ 9 ; }
|
1 2 3 | .selector { color : blue \ 9 ; }
.selector { color : blue \ 9 ; }
|
1 2 | .selector { color : blue ; }
|
IE Media Query Hack
1 2 | @media screen and (min-resolution: + 72 dpi) {}
|
1 2 | @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none ) {}
|
1 2 | @media \ 0 screen\, screen \ 9 {}
|
1 2 | @media screen and ( min-width : 0 \ 0 ) {}
|
1 2 | @media screen and ( min-width : 400px ) {}
|
IE JavaScript Hack
1 2 3 | (checkIE = document.createElement( "b" )).innerHTML = "<!--[if IE 6]><i></i><![endif]-->" ;
var isIE = checkIE.getElementsByTagName( "i" ).length == 1;
|
1 2 3 4 | (checkIE = document.createElement( "b" )).innerHTML = "<!--[if IE 7]><i></i><![endif]-->" ;
var isIE = checkIE.getElementsByTagName( "i" ).length == 1;
navigator.appVersion.indexOf( "MSIE 7." )!=-1
|
1 2 3 | (checkIE = document.createElement( "b" )).innerHTML = "<!--[if IE 8]><i></i><![endif]-->" ;
var isIE = checkIE.getElementsByTagName( "i" ).length == 1;
|
1 2 3 | (checkIE = document.createElement( "b" )).innerHTML = "<!--[if IE 9]><i></i><![endif]-->" ;
var isIE = checkIE.getElementsByTagName( "i" ).length == 1;
|
1 2 | var isIE = eval( "/*@cc_on!@*/false" ) && document.documentMode === 10;
|
1 2 | var isIE = document.body.style.msTouchAction != undefined;
|
Firefox 浏览器
选择器 Hack
1 2 | body:empty .selector {}
|
1 2 | .selector, x:-moz-any-link {}
|
1 2 | .selector, x:-moz-any-link; x: default {}
|
1 2 | body:not(:-moz-handler-blocked) .selector {}
|
媒体查询 Hack
1 2 | @media screen and (min-resolution: + 72 dpi) {}
|
1 2 | @media screen and (-moz-images-in-menus: 0 ) {}
|
1 2 | @media screen and (min--moz-device-pixel-ratio: 0 ) {}
|
JavaScript Hack
1 2 | var isFF = !!navigator.userAgent.match(/firefox/i);
|
1 2 | var isFF = Boolean(window.globalStorage);
|
1 2 | var isFF = /a/[-1]== 'a' ;
|
1 2 | var isFF = ( function x(){})[-5]== 'x' ;
|
Chrome 浏览器
选择器 Hack
1 2 | ::made-up-pseudo-element, .selector {}
|
媒体查询 Hack
1 2 | @media screen and (-webkit-min-device-pixel-ratio: 0 ) {}
|
JavaScript Hack
1 2 | var isChrome = Boolean(window.chrome);
|
Safari 浏览器
选择器 Hack
1 2 3 | html[xmlns*= "" ] body:last-child .selector {}
html[xmlns*= "" ]:root .selector {}
|
1 2 | *|html[xmlns*= "" ] .selector {}
|
1 2 | ::made-up-pseudo-element, .selector {}
|
媒体查询 Hack
1 2 | @media screen and (-webkit-min-device-pixel-ratio: 0 ) {}
|
JavaScript Hack
1 2 | var isSafari = /a/.__proto__== '//' ;
|
Opera 浏览器
选择器 Hack
1 2 | *|html[xmlns*= "" ] .selector {}
|
1 2 | html:first-child .selector {}
|
1 2 | noindex:-o-prefocus, .selector {}
|
媒体查询 Hack
1 2 | @media all and ( min-width : 0px ){}
|
1 2 | @media all and (-webkit-min-device-pixel-ratio: 10000 ), not all and (-webkit-min-device-pixel-ratio: 0 ) {}
|
1 2 | @media screen and (min-resolution: + 72 dpi) {}
|
JavaScript Hack
1 2 | var isOpera = /^ function \(/.test([].sort);
|
1 2 | var isOpera = Boolean(window.opera);
|