cssHack手册 - 走看看

zoukankan html css js c++ java

cssHack手册
浏览器渲染页面的方式各不相同，甚至同一浏览器的不同版本（“杰出代表”是 IE）也有差异。因此，浏览器兼容成为前端开发人员的必备技能。如果有一份浏览器 Hack 手册，那查询起来就方便多了。这篇文章就向大家分享 Browserhacks 帮我们从网络上收集的各个浏览器特定的 CSS & JavaScript Hack，记得推荐和分享啊！

IE 选择器 Hack
1. /* IE 6 and below */
2. * html .selector {}
3. .suckyie6.selector {} /* .suckyie6 can be any unused class */
1. /* IE 7 and below */
2. .selector, {}
1. /* IE 7 */
2. *:first-child+html .selector {}
3. .selector, x:-IE7 {}
4. *+html .selector {}
1. /* Everything but IE 6 */
2. html > body .selector {}
1. /* Everything but IE 6/7 */
2. html > /**/ body .selector {}
3. head ~ /* */ body .selector {}
1. /* Everything but IE 6/7/8 */
2. :root *> .selector {}
3. body:last-child .selector {}
4. body:nth-of-type(1) .selector {}
5. body:first-of-type .selector {}
IE 属性/值 Hack
1. /* IE 6 */
2. .selector { _color: blue; }
3. .selector { -color: blue; }
1. /* IE 6/7 - acts as an !important */
2. .selector { color: blue !ie; }
3. /* string after ! can be anything */
1. /* IE 6/7 - any combination of these characters:
2. ! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > | */
3. .selector { !color: blue; }
4. .selector { $color: blue; }
5. .selector { &color: blue; }
6. .selector { *color: blue; }
7. /* ... */
1. /* IE 8/9 */
2. .selector { color: blue\0/; }
3. /* must go at the END of all rules */
1. /* IE 9/10 */
2. .selector:nth-of-type(1n) { color: blue\9; }
1. /* IE 6/7/8/9/10 */
2. .selector { color: blue\9; }
3. .selector { color/*\**/: blue\9; }
1. /* Everything but IE 6 */
2. .selector { color/**/: blue; }
IE Media Query Hack
1. /* IE 6/7 */
2. @media screen\9 {}
1. /* IE 8 */
2. @media \0screen {}
1. /* IE 9/10, Firefox 3.5+, Opera */
2. @media screen and (min-resolution: +72dpi) {}
1. /* IE 10+ */
2. @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}
1. /* IE 6/7/8 */
2. @media \0screen\,screen\9 {}
1. /* IE 8/9/10 & Opera */
2. @media screen\0 {}
1. /* IE 9/10 */
2. @media screen and (min-0\0) {}
1. /* Everything but IE 6/7/8 */
2. @media screen and (min- 400px) {}
IE JavaScript Hack
1. /* IE 6 */
2. (checkIE = document.createElement("b")).innerHTML = "";
3. var isIE = checkIE.getElementsByTagName("i").length == 1;
1. /* IE 7 */
2. (checkIE = document.createElement("b")).innerHTML = "";
3. var isIE = checkIE.getElementsByTagName("i").length == 1;
4. navigator.appVersion.indexOf("MSIE 7.")!=-1
1. /* IE <= 8 */
2. var isIE = '\v'=='v';
1. /* IE 8 */
2. (checkIE = document.createElement("b")).innerHTML = "";
3. var isIE = checkIE.getElementsByTagName("i").length == 1;
1. /* IE 9 */
2. (checkIE = document.createElement("b")).innerHTML = "";
3. var isIE = checkIE.getElementsByTagName("i").length == 1;
1. /* IE 10 */
2. var isIE = eval("/*@cc_on!@*/false") && document.documentMode === 10;
1. /* IE 10 */
2. var isIE = document.body.style.msTouchAction != undefined;
Firefox 浏览器

选择器 Hack
1. /* Firefox 1.5 */
2. body:empty .selector {}
1. /* Firefox 2+ */
2. .selector, x:-moz-any-link {}
1. /* Firefox 3+ */
2. .selector, x:-moz-any-link; x:default {}
1. /* Firefox 3.5+ */
2. body:not(:-moz-handler-blocked) .selector {}
媒体查询 Hack
1. /* Firefox 3.5+, IE 9/10, Opera */
2. @media screen and (min-resolution: +72dpi) {}
1. /* Firefox 3.6+ */
2. @media screen and (-moz-images-in-menus:0) {}
1. /* Firefox 4+ */
2. @media screen and (min--moz-device-pixel-ratio:0) {}
JavaScript Hack
1. /* Firefox */
2. var isFF = !!navigator.userAgent.match(/firefox/i);
1. /* Firefox 2 - 13 */
2. var isFF = Boolean(window.globalStorage);
1. /* Firefox 2/3 */
2. var isFF = /a/[-1]=='a';
1. /* Firefox 3 */
2. var isFF = (function x(){})[-5]=='x';
Chrome 浏览器

选择器 Hack
1. /* Chrome 24- and Safari 5- */
2. ::made-up-pseudo-element, .selector {}
媒体查询 Hack
1. /* Chrome, Safari 3+ */
2. @media screen and (-webkit-min-device-pixel-ratio:0) {}
JavaScript Hack
1. /* Chrome */
2. var isChrome = Boolean(window.chrome);
Safari 浏览器

选择器 Hack
1. /* Safari 2/3 */
2. html[xmlns*=""] body:last-child .selector {}
3. html[xmlns*=""]:root .selector {}
1. /* Safari 2/3.1, Opera 9.25 */
2. *|html[xmlns*=""] .selector {}
1. /* Safari 5- and Chrome 24- */
2. ::made-up-pseudo-element, .selector {}
媒体查询 Hack
1. /* Safari 3+, Chrome */
2. @media screen and (-webkit-min-device-pixel-ratio:0) {}
JavaScript Hack
1. /* Safari */
2. var isSafari = /a/.__proto__=='//';
Opera 浏览器

选择器 Hack
1. /* Opera 9.25, Safari 2/3.1 */
2. *|html[xmlns*=""] .selector {}
1. /* Opera 9.27 and below, Safari 2 */
2. html:first-child .selector {}
1. /* Opera 9.5+ */
2. noindex:-o-prefocus, .selector {}
媒体查询 Hack
1. /* Opera 7 */
2. @media all and (min- 0px){}
1. /* Opera 12- */
2. @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {}
1. /* Opera, Firefox 3.5+, IE 9/10 */
2. @media screen and (min-resolution: +72dpi) {}
1. /* Opera, IE 8/9/10 */
2. @media screen {}
JavaScript Hack
1. /* Opera 9.64- */
2. var isOpera = /^function \(/.test([].sort);
1. /* Opera 12- */
2. var isOpera = Boolean(window.opera);
在线查询在线测试
查看全文

相关阅读:
237. Delete Node in a Linked List
430. Flatten a Multilevel Doubly Linked List
707. Design Linked List
83. Remove Duplicates from Sorted List
160. Intersection of Two Linked Lists
426. Convert Binary Search Tree to Sorted Doubly Linked List
142. Linked List Cycle II
类之间的关系
 初始化块
 明确类和对象

原文地址：https://www.cnblogs.com/qmtx3/p/2978581.html