zoukankan      html  css  js  c++  java
  • 主流浏览器之专属CSS hack

    CSS hack:由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。简而言之,浏览器不同于W3C关于CSS标准的解析就是CSS hack。一般谈到CSS hack,最先想到的就是ie6。ie6很头疼,曾经是辉煌,如今是夕阳西下了,被进步理论和思想淘汰是早晚的事情,目前想做的就是尽最大的可能去向下兼容它。这篇博文需要说的是:主流浏览器之专属CSS hack。
    下面从ie开始说吧:

     

    ie6(_):

    1 /*ie 6*/
    2 _100px;
    3 /*
    4 给单独 ie6 的解析值,在属性前加下划线“_”
    5 */

     

    ie6 & ie7(*):

    1 /*ie 6 和ie 7*/
    2 *100px;
    3 /*
    4 给单独 ie6 和 ie7 的解析值,在属性前加星号“*”
    5 */

    ie7(*+):

    1 /*ie 7*/
    2 *+100px;
    3 /*
    4 给单独 ie7 的解析值,在属性前加星号和加号“*+”
    5 */

    ie8(\0):

    1 /*ie 8*/
    2 100px\9;
    3 /*
    4 给单独 ie8 的解析值,在属性值后加“\0”
    5 */

    ie9(\9\0):

    1 /*ie 9*/
    2 100px\9\0;
    3 /*
    4 给单独ie 9的解析值,在属性值后加“\9\0”
    5 */

    firefox:

     1 /* 低版本火狐1,2 */
     2 body:empty #firefox12/*选择器前加 body:empty*/
     3 { 100px;}
     4  
     5 /* 高版本火狐*/
     6 @-moz-document url-prefix()/* 选择器前加 @-moz-document url-prefix() */
     7 {
     8  #firefox
     9  {
    10   100px;
    11  }
    12 }

     

    chrome safari:

    1 /* Safari */
    2 @media screen and (-webkit-min-device-pixel-ratio:0)
    3 /* 选择器前加 @media screen and (-webkit-min-device-pixel-ratio:0) */
    4 {#safari { display: block; }}

    opera

    1 /* Opera */
    2 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
    3 /*选择器前加 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)*/
    4 {head~body #opera { display: block; }}

    CSS Hack 虽好且方便兼容各浏览器,但是通不过 W3C 验证,所以还得自己权衡是否有必要去使用。

  • 相关阅读:
    车羊问题的一种简洁证明
    linux document viewer 中文乱码、方块
    java编程方式生成CA证书
    First JNI
    opensuse 上面运行eclipse崩溃的问题
    java在非安全网络上建立可信任安全的通道(2/3)
    java在非安全网络上建立可信任安全的通道(1/3)
    java编程方式用CA给证书进行签名/签发证书
    泛型类里面获取到泛型的类型
    安全领域的一些概念
  • 原文地址:https://www.cnblogs.com/naokr/p/2725379.html
Copyright © 2011-2022 走看看