zoukankan      html  css  js  c++  java
  • 【必备】史上最全的浏览器 CSS & JS Hack 手册(转)

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

    移动手机iphone media query Hack

    /*
     * media query for iPhone 4/4s
     * if targeting 2G/3G/3GS/4/4S, then remove "-webkit-min-device-pixel-ratio: 2" media query condition.
     */
    @media only screen 
        and (device-aspect-ratio: 2/3) 
        and (-webkit-device-pixel-ratio: 2)
        and (orientation : portrait) {
    }
    
    /*
     * media query for iPhone 5/5S
     */
    @media only screen 
        and (device-aspect-ratio: 40/71) 
        and (-webkit-min-device-pixel-ratio: 2)
        and (orientation : portrait) {
    }
    /*
     * media query for iPhone 6
     */
    @media only screen 
        and (device-aspect-ratio: 667/375)
        and (-webkit-min-device-pixel-ratio : 2)
        and (orientation : portrait) {
        /* STYLES GO HERE */
    }
    
    /*
     * media query for iPhone 6+
     */
    @media only screen 
        and (device-aspect-ratio: 16/9)
        and (-webkit-device-pixel-ratio: 3)
        and (orientation : portrait) {
        /* STYLES GO HERE */
    }

    下面转载自:http://websqq.org/archives/1428, http://websqq.org/archives/1161

    IE选择器 Hack

    /* IE 6 and below */
    * html .selector {}
    .suckyie6.selector {} /* .suckyie6 can be any unused class */
    /* IE 7 and below */
    .selector, {}
    
    /* IE 7 */
    *:first-child+html .selector {}
    .selector, x:-IE7 {}
    *+html .selector {}
    
    /* Everything but IE 6 */
    html > body .selector {}
    
    /* Everything but IE 6/7 */
    html > /**/ body .selector {}
    head ~ /* */ body .selector {}
    
    /* Everything but IE 6/7/8 */
    :root *> .selector {}
    body:last-child .selector {}
    body:nth-of-type(1) .selector {}
    body:first-of-type .selector {}

    IE属性/值 Hack

    /* IE 6 */
    .selector { _color: blue; }
    .selector { -color: blue; }
    /* IE 6/7 - acts as an !important */
    .selector { color: blue !ie; }
    /* string after ! can be anything */
    
    /* IE 6/7 - any combination of these characters:
    ! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > | */
    .selector { !color: blue; }
    .selector { $color: blue; }
    .selector { &color: blue; }
    .selector { *color: blue; }
    /* ... */
    
    /* IE 8/9 */
    .selector { color: blue/; }
    /* must go at the END of all rules */
    
    /* IE 8/9 */
    .selector { color: blue/; }
    /* must go at the END of all rules */
    
    /* IE 9/10 */
    .selector:nth-of-type(1n) { color: blue9; }
    
    /* IE 6/7/8/9/10 */
    .selector { color: blue9; }
    .selector { color/***/: blue9; }
    
    /* Everything but IE 6 */
    .selector { color/**/: blue; }

    IE Media Query Hack

    /* IE 6/7 */
    @media screen9 {}
    /* IE 8 */
    @media screen {}
    
    /* IE 9/10, Firefox 3.5+, Opera */
    @media screen and (min-resolution: +72dpi) {}
    
    /* IE 10+ */
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}
    
    /* IE 6/7/8 */
    @media screen\,screen9 {}
    
    /* IE 8/9/10 & Opera */
    @media screen {}
    
    /* IE 9/10 */
    @media screen and (min-0) {}
    
    /* Everything but IE 6/7/8 */
    @media screen and (min- 400px) {}

    IE Javascript Hack

    /* IE 6 */
    (checkIE = document.createElement("b")).innerHTML = "<!--[if IE 6]><i></i><![endif]-->";
    var isIE = checkIE.getElementsByTagName("i").length == 1;
    /* IE 7 */
    (checkIE = document.createElement("b")).innerHTML = "<!--[if IE 7]><i></i><![endif]-->";
    var isIE = checkIE.getElementsByTagName("i").length == 1;
    navigator.appVersion.indexOf("MSIE 7.")!=-1
    
    /* IE <= 8 */
    var isIE = 'v'=='v';
    
    /* IE 8 */
    (checkIE = document.createElement("b")).innerHTML = "<!--[if IE 8]><i></i><![endif]-->";
    var isIE = checkIE.getElementsByTagName("i").length == 1;
    
    /* IE 9 */
    (checkIE = document.createElement("b")).innerHTML = "<!--[if IE 9]><i></i><![endif]-->";
    var isIE = checkIE.getElementsByTagName("i").length == 1;
    
    /* IE 10 */
    var isIE = eval("/*@cc_on!@*/false") && document.documentMode === 10;
    
    /* IE 10 */
    var isIE = document.body.style.msTouchAction != undefined;

    媒体查询 Hack--Firefox,Chrome,Opera

    /* Firefox 3.5+, IE 9/10, Opera */
    @media screen and (min-resolution: +72dpi) {}
    /* Firefox 3.6+ */ @media screen and (-moz-images-in-menus:0) {} /* Firefox 4+ */ @media screen and (min--moz-device-pixel-ratio:0) {} /* Chrome, Safari 3+ */ @media screen and (-webkit-min-device-pixel-ratio:0) {} /* Opera 7 */ @media all and (min- 0px){} /* Opera 12- */ @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {} /* Opera, Firefox 3.5+, IE 9/10 */ @media screen and (min-resolution: +72dpi) {} /* Opera, IE 8/9/10 */ @media screen {}

    Javascript Hack--Firefox,Chrome,Opera

    /* Firefox */
    var isFF = !!navigator.userAgent.match(/firefox/i);
    /* Firefox 2 - 13 */
    var isFF = Boolean(window.globalStorage);
    
    /* Firefox 2/3 */
    var isFF = /a/[-1]=='a';
    
    /* Firefox 3 */
    var isFF = (function x(){})[-5]=='x';
    
    /* Chrome */
    var isChrome = Boolean(window.chrome);
    
    /* Safari */
    var isSafari = /a/.__proto__=='//';
    
    /* Opera 9.64- */
    var isOpera = /^function (/.test([].sort);
    /* Opera 12- */
    var isOpera = Boolean(window.opera);

    Firefox 浏览器   选择器Hack

    /* Firefox 1.5 */
    body:empty .selector {}
    /* Firefox 2+ */
    .selector, x:-moz-any-link {}
    
    /* Firefox 3+ */
    .selector, x:-moz-any-link; x:default {}
    
    /* Firefox 3.5+ */
    body:not(:-moz-handler-blocked) .selector {}

    Chrome,Safari,Opera浏览器   选择器 Hack

    /* Chrome 24- and Safari 5- */
    ::made-up-pseudo-element, .selector {}
    
    /* Safari 2/3 */
    html[xmlns*=""] body:last-child .selector {}
    html[xmlns*=""]:root .selector {}
    
    /* Safari 2/3.1, Opera 9.25 */
    *|html[xmlns*=""] .selector {}
    
    /* Safari 5- and Chrome 24- */
    ::made-up-pseudo-element, .selector {}
    
    /* Opera 9.25, Safari 2/3.1 */
    *|html[xmlns*=""] .selector {}
    
    /* Opera 9.27 and below, Safari 2 */
    html:first-child .selector {}
    
    /* Opera 9.5+ */
    noindex:-o-prefocus, .selector {}
  • 相关阅读:
    记账本微信小程序开发三
    记账本微信小程序开发二
    记账本微信小程序开发一
    一个Java系统测试
    河北省重大技术需求征集系统(5)
    河北省重大技术需求征集系统(4)
    河北省重大技术需求征集系统(3)
    河北省重大技术需求征集系统(2)
    《软件需求工程》阅读笔记02
    通过API操作HBase数据库
  • 原文地址:https://www.cnblogs.com/JoannaQ/p/4285837.html
Copyright © 2011-2022 走看看