zoukankan      html  css  js  c++  java
  • css hack的理解

    什么是CSS hack

    由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack!

    原理:利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式。常见的hack有

    1.属性hack   2.选择器hack   3.IE条件注释

    ie条件注释:适用于[IE5, IE9]常见格式如下:     

     

     <!--[if IE 6]>
       Special instructions for IE 6 here
    <![endif]-->

    选择器hack:
    不同浏览器对选择器的支持不一样

    /***** Selector Hacks ******/
    
    /* IE6 and below */
    * html #uno  { color: red }
    
    /* IE7 */
    *:first-child+html #dos { color: red }
    
    /* IE7, FF, Saf, Opera  */
    html>body #tres { color: red }
    
    /* IE8, FF, Saf, Opera (Everything but IE 6,7) */
    html>/**/body #cuatro { color: red }
    
    /* Opera 9.27 and below, safari 2 */
    html:first-child #cinco { color: red }
    
    /* Safari 2-3 */
    html[xmlns*=""] body:last-child #seis { color: red }
    
    /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
    body:nth-of-type(1) #siete { color: red }
    
    /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
    body:first-of-type #ocho {  color: red }
    
    /* saf3+, chrome1+ */
    @media screen and (-webkit-min-device-pixel-ratio:0) {
     #diez  { color: red  }
    }
    
    /* iPhone / mobile webkit */
    @media screen and (max-device- 480px) {
     #veintiseis { color: red  }
    }
    
    /* Safari 2 - 3.1 */
    html[xmlns*=""]:root #trece  { color: red  }
    
    /* Safari 2 - 3.1, Opera 9.25 */
    *|html[xmlns*=""] #catorce { color: red  }
    
    /* Everything but IE6-8 */
    :root *> #quince { color: red  }
    
    /* IE7 */
    *+html #dieciocho {  color: red }
    
    /* Firefox only. 1+ */
    #veinticuatro,  x:-moz-any-link  { color: red }
    
    /* Firefox 3.0+ */
    #veinticinco,  x:-moz-any-link, x:default  { color: red  }
    
    
    属性hack:不同浏览器解析bug或方法

     

    /* IE6 */
    #once { _color: blue }
    
    /* IE6, IE7 */
    #doce { *color: blue; /* or #color: blue */ }
    
    /* Everything but IE6 */
    #diecisiete { color/**/: blue }
    
    /* IE6, IE7, IE8 */
    #diecinueve { color: blue9; }
    
    /* IE7, IE8 */
    #veinte { color/***/: blue9; }
    
    /* IE6, IE7 -- acts as an !important */
    #veintesiete { color: blue !ie; } /* string after ! can be anything */
  • 相关阅读:
    bootstrap 新手入门(一)【我是新手,请指正】
    zend studio 安装+汉化
    tp总结
    tp论坛 第三节 板块模板的建立和完善(二)
    tp论坛 分页(三)
    tp写一个微型论坛 (一)
    thinkphp第四节 模型与CURD
    thinkphp 第二节
    angular5中的自定义指令(属性指令)
    列表生成式和生成器生成式
  • 原文地址:https://www.cnblogs.com/8080zh/p/11015276.html
Copyright © 2011-2022 走看看