zoukankan      html  css  js  c++  java
  • CSS Hack

    第一种:IE条件式

      因为IE对CSS的解析存在很多的问题,所有我们的CSS hack 大部分都是针对IE的。还有就是官方也有自己的CSS hack,那么看代码吧!

    <!--[if IE]>

    <link type="text\css" href="IE.css" rel="stylesheet"/>

    <![endif]-->

    这样就可以为IE加载定义好的CSS文件了。

    我们还可以为不同的IE版本加载不同的CSS文件,例如:
     

    <!--[if IE 6]>

    <link type="text\css" href="IE6.css" rel="stylesheet"/>

    <![endif]-->

    如果我们想按照一定范围版本的IE进行hack,我们可以结合一些关键字来搞定。

    lte 小于等于

    lt 小于

    gte 大于等于

    gt 大于

    ! 表示不等于

    具体的例子就不弄了,大同小异,有兴趣的可以试试。

    这种方式的不仅对加载link标签有作用,而且对js、style等也是有作用的。

    第二种:选择前缀式

      这种方式还是挺常见的,就是在css 选择符前加一些只有特定的浏览器才能识别的前缀,例如 *html  只对IE6有效、*+html只对IE7有效。当然这种方式看似挺不错的,但是保不齐那天微软在后面的浏览器也识别了,那就有点惨了,所以还是第一种方式比较保险。

      ps:*+html 对IE7的HACK 必须保证HTML顶部有如下声明:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    第三种:样式属性前缀式

      这种方式的hack更常见,就是在样式属性下面加前缀,这样这些属性只有在特定的浏览器上才有效。例如 _ 只在 IE6 生效、* 只在IE6和IE7下生效。

      区别IE6与FF: 
              background:orange;*background:blue; 
      区别IE6与IE7: 
              background:green !important;background:blue; 
      区别IE7与FF: 
              background:orange; *background:green; 
      区别FF,IE7,IE6: 
              background:orange;*background:green !important;*background:blue;

      ps:IE都能识别*;标准浏览器(如FF)不能识别*;

      IE6能识别*,但不能识别 !important, 
      IE7能识别*,也能识别!important; 
      FF不能识别*,但能识别!important;

    在理论上来说条件选择的那个方式最好用,但是那个东西不利于开发和维护,所以后面那两种比较流行,当然也都存在一定的向后兼容风险,这个要看具体情况了。

    原文链接:http://www.cnblogs.com/iloveiknow/archive/2011/11/22/2259040.html

    -------------------------------------------------------------

          在这个浏览器百花争鸣的时代,作为前端开发的我们为了我们漂亮的设计能适应各个浏览器可为煞费苦心,主要体现在javascript和css上面。javascript我这次就不谈了,先说说css。

          为了适应不同浏览器不同的版本(版本主要就ie来说),ie这朵奇葩现在我们要兼容6-9,它的10也快出来了。。。在ie下我们可以写条件注释来区分ie和其他浏览器,以及ie的版本,这些请大家自行google。这篇文章主要讨论的是css hack。下面废话补多说了,直接上代码
    复制代码
    <!DOCTYPE html>  
    <html>  
    <head>  
        
    <title>Css Hack</title>  
        
    <style>  
        #test   
        
    {   
            width
    :300px;   
            height
    :300px;   
              
            background-color
    :blue;      /*firefox*/
            background-color
    :red\9;      /*all ie*/
            background-color
    :yellow\0;    /*ie8*/
            +background-color
    :pink;        /*ie7*/
            _background-color
    :orange;       /*ie6*/
        
    }  
        :root #test 
    { background-color:purple\9; }  /*ie9*/
        @media all and (min-0px)
    { #test {background-color:black\0;} }  /*opera*/
        @media screen and (-webkit-min-device-pixel-ratio:0)
    { #test {background-color:gray;} }  /*chrome and safari*/
        
    </style>  
    </head>  
    <body>  
        
    <div id="test">test</div>  
    </body>  
    </html> 
    复制代码

          上面这段代码大家可以直接copy出来,保存成html在各浏览器试试。下面我来分析下:

        background-color:blue; 各个浏览器都认识,这里给firefox用;
        background-color:red\9;\9所有的ie浏览器可识别;
        background-color:yellow\0; \0 是留给ie8的,但笔者测试,发现最新版opera也认识,汗。。。不过且慢,后面自有hack写了给opera认的,所以,\0我们就认为是给ie8留的;
        +background-color:pink; + ie7定了;
        _background-color:orange; _专门留给神奇的ie6;
        :root #test { background-color:purple\9; } :root是给ie9的,网上流传了个版本是 :root #test { background-color:purple\0;},呃。。。这个。。。,新版opera也认识,所以经笔者反复验证最终ie9特有的为:root 选择符 {属性\9;}
        @media all and (min-0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera,必须加个\0,不然firefox,chrome,safari也都认识。。。
        @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。
     
        好了就这么多了,特别注意以上顺序是不可以改变的。css hack虽然可以解决个浏览器之间css显示的差异问题,但是毕竟不符合W3C规范,我们平时写css最好是按照标准来,这样对我们以后维护也是大有好处的,实在不行再用。
  • 相关阅读:
    Android Studio更新升级方法
    手把手教你用android studio创建第一个安卓程序加载html5页面(二)
    手把手教你用android studio创建第一个安卓程序加载html5页面(一)
    spoon kettle连接数据库失败解决方法
    AE多用户同时编辑同一个版本数据的解决方法
    ARCGIS知乎上的好文章
    mac系统访问windows共享文件夹
    奶爸程序员的“育儿”心得
    tomcat取带有中文的参数乱码的解决办法
    java问题排查可能用到的一些命令
  • 原文地址:https://www.cnblogs.com/dragonstreak_1/p/2597793.html
Copyright © 2011-2022 走看看