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(_):

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

     

    ie6 & ie7(*):

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

     

    ie7(*+):

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

     

    ie8():

    /*ie 8*/
    100px;
    /*
    给单独ie 8的解析值,在属性值后加“”
    */

     

    ie9(9):

    /*ie 9*/
    100px9;
    /*
    给单独ie 9的解析值,在属性值后加“9”
    */

     

    所有ie(9):

    /*ie*/
    100px9;
    /*
    给所有ie的解析值,在属性值后加“9”
    */

     

    firefox:

    /* 低版本火狐1,2 */
    body:empty #firefox12/*选择器前加 body:empty*/
    { 100px;}
    
    /* 高版本火狐*/
    @-moz-document url-prefix()/* 选择器前加 @-moz-document url-prefix() */
    {
     #firefox
     {
      100px;
     }
    }

     

    safari:

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

     

    opera:

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

     

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

  • 相关阅读:
    ARM汇编初探---汇编代码中都有哪几类指令---ARM伪指令介绍
    RPC与REST的差别
    mahout源码KMeansDriver分析之五CIMapper
    cakephp , the subquery
    我也谈 javascript 模块化 -AMD规范
    TCP/IP Protocol Fundamentals Explained with a Diagram
    js 中ajax请求时设置 http请求头中的x-requestd-with= ajax
    理解用requireJs 来实现javascript的模块化加载
    javascript 中 apply(或call)方法的用途----对象的继承
    javascript 中{}和[] 的理解
  • 原文地址:https://www.cnblogs.com/august-8/p/4449487.html
Copyright © 2011-2022 走看看