• 浏览器兼容性css

    普通类
    • 支持
    • 批判
    • 提问
    • 解释
    • 补充
    • 删除
    • 浏览器兼容性css

    IE6、IE7、IE8、Firefox、Opera、谷歌浏览器、Safari CSS hack区分,浏览器兼容性

    • 1、针对样式名

    1、IE版本和火狐

    如果只让ie6看见用*html .head{color:#000;}
    如果只让ie7看见用*+html .head{color:#000;}
    如果只让ff看见用:root body .head{color:#000;}
    如果只让ff、IE8看见用html>/**/body .head{color:#000;}
    如果只是不让ie6看见用html>body .head{color:#000;} 即对IE 6无效
    如果只是不让ff、IE8看见用*body .head{color:#000;} 即对ff、IE8无效

     

    2、只有谷歌浏览器、Safari识别
     

    @media screen and (-webkit-min-device-pixel-ratio:0) {
    其中写入要兼容的样式.denglu table{color:#424242;margin-top:0px;}
    }
    • 2、针对具体属性

    如果只让ie6看见用_      .head{_color:#000;}
    如果只让ie7看见用+与_结合的方法:      .head{+color:#f00;!;_color:#000;}

    IE8正式版hack

    \9″ 例:”margin:0px auto\9;”.这里的”\9″可以区别所有IE8和FireFox.
    “*” IE6、IE7可以识别.IE8、FireFox不能.
    “_” IE6可以识别”_”,IE7、IE8、FireFox不能.
    如：
    .a {color:#f00;      color:#f60\9;     +color:#00FF00;     _color:#0000FF; }
    从左到右分别对应 FF,IE8 IE7 IE6

    ————————————————-

    各浏览器CSS hack兼容表：

     IE6IE7IE8FirefoxChromeSafari
    !important Y Y  
    _Y     
    *YY    
    *+ Y    
    9YYY   
    0  Y   
    nth-of-type(1)    YY

    代码示例：

    #test{
    color:red; /* 所有浏览器都支持 */
    color:red !important;/* Firefox、IE7支持 */
    _color:red; /* IE6支持 */
    *color:red; /* IE6、IE7支持 */
    *+color:red; /* IE7支持 */
    color:red\9; /* IE6、IE7、IE8支持 */
    color:red\0; /* IE8支持 */
    }

    body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */

    整体测试代码示例：

    .test{
    color:#000000;
    color:#0000FF\0;
    [color:#00FF00;
    *color:#FFFF00;
    _color:#FF0000;
    }

    • 3、其他说明

    1、如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，此代码如下：
    <meta http-equiv=”x-ua-compatible” content=”ie=7″ />

    2、body:nth-of-type(1) 如果这样写，表示全局查找body，将会对应第一个<body>。

    3、还有其他写法，比如：
    *html #test{}或者 *+html #test{}

    4、*+html 对IE7的hack 必须保证HTML顶部有如下声明：

    http://www.w3.org/TR/html4/loose.dtd

    5、顺序：Firefox、IE8、IE7、IE6依次排列。

    • 4、小知识：什么是CSS hack？

    由于不同的浏览器，比如IE6、IE7、IE8、Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。

    这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

    这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack，也叫写CSS hack。

    比如 IE6能识别下划线_和星号*，IE7能识别星号*，当不能识别下划线_，而firefox两个都不能认识。等

    书写顺序，一般是将识别能力强的浏览器的CSS写在后面。下面如何写里面说得更详细些。

    如何写CSS Hack

    比如要分辨IE6和firefox两种浏览器，可以这样写：

    <style>

    div{

    background:green; /* for firefox */

    *background:red;    /* for IE6 */

    }    _background:red;    /* for IE6 */

    </style>

    <div>我在IE6中看到是红色的，在firefox中看到是绿色的。</div>

    解释一下：

    上面的css在firefox中，它是认识不了后面的那个带星号*的东东是什么的，于是将它过滤掉，不予理睬，解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。

    在IE6中呢，它两个background都能识别出来，它解析得到的结果是:div{background:green;background:red;},于是根据优先级别，处在后面的red的优先级高，于是当然这个div的背景颜色就是红色的了。

    CSS hack:区分IE6，IE7，firefox

    区别不同浏览器，CSS hack写法：

    区别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;

    注：IE都能识别*;标准浏览器(如FF)不能识别*；

    IE6能识别*，但不能识别 !important,

    IE7能识别*，也能识别!important;

    FF不能识别*，但能识别!important;

    IE6 IE7 FF

    * √ √ ×

    !important × √ √

    另外再补充一个，下划线“_”,

    IE6支持下划线，IE7和firefox均不支持下划线。

    于是大家还可以这样来区分IE6，IE7，firefox

    : background:orange;*background:green;_background:blue;

    注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面

    • 5、IE专用的条件注释
    <!-- 其他浏览器 -->
    <link rel="stylesheet" type="text/css" href="css.css" />

    <!--[if IE 7]>
    <!-- 适合于IE7 -->
    <link rel="stylesheet" type="text/css" href="ie7.css" />
    < ![endif]-->

    <!--[if lte IE 6]>
    <!-- 适合于IE6及一下 -->
    <link rel="stylesheet" type="text/css" href="ie.css" />
    < ![endif]-->
    • 6、width100%缩小窗口时背景图片出现空白bug解决办法

    页面容器（#wrap）与页面头部（#header ）为100%宽度。而内容的容器（#page）为固定宽度960px。浏览窗口缩小而小于内容层宽度时会产生宽度理解上的差异。改变浏览器窗口的大小，小于内容层宽度，拖动水平滚动条，出现了bug的样子。右边的背景不存在了。（见以前社区首页）。

    问题的根本在于：当窗口缩小时，浏览器默认100%宽度为浏览器窗口的宽度。而忽略了下部内容层固定宽度(960px)。从而出现了固定宽度大于100%宽度的现象。浏览以此理解来解析页面，就出现了容器宽度理解上的差异，出现了一个非常奇特的BUG。

    我们分析，问题的解决之道：既然是宽度理解上的差异，只需要告知浏览器页面容器的宽度，头部元素的宽度不能小于内容层的宽度即可。当浏览器窗口缩小时，保持页面容器和头部元素的最小宽度为内容层的宽度。这样就解决了宽度上出现问题。

    #wrap {
        width:100%;
        background:#ddd;
        width:expression(document.body.clientWidth <= 960? "960px": "auto");
        min-width:960px;
    }
    #header {
        width:100%;
        height:78px;
        border-bottom:1px solid #f60;
        background:#f0f0f0 url(head_tbg.jpg) repeat-x;
    }
    #page {
        width:960px;
        height:100px;
        margin:5px auto;
        background:#fff;
        border:1px solid #00CCCC;
    }

    html代码为：
    <div id="wrap">
        <div id="header"></div>
        <div id="page"></div>
    </div>


    社区首页头部背景css也加上了后两句，从而解决了空白问题，css如下所示：

    .top_background{
     background: url("/images/community/purple/header_bg.png") repeat-x scroll center top transparent;
        margin: 0 auto 60px;
        width: 100%;
        height:136px;
        z-index:20;
        width:expression(document.body.clientWidth <= 1100? "1100px": "auto");
        min-width:1100px;
    }

    • 标签：
    • red
    • css
    • css兼容
    • color
    • 浏览器
    • 识别
    • background
    • firefox
    • ie7
    • ie6
    • 浏览器css
    • ie8
  • 加入的知识群：
    学习元评论 (0条)

    评论为空
    聪明如你，不妨在这 发表你的看法与心得 ~



    登录之后可以发表学习元评论。
      
暂无内容~~
顶部