• CSS:IE,Chrome,Firefox兼容性和CSS Hack


    原作者:微米博客

    以前写过一篇关于CSS hack的文章,但近期回头看了看发现理解的不够深刻,总结的也不凝练,于是今天重新测试从新写一篇。常用的CSS

    hack如下(笔者只对IE&FF&Chrome进行了测试)。

    hack列表(全部经笔者测试,且均为标准模式下,混杂模式由于很少会用到所以未对其进行测试):

    其中粉红色部分为属性hack,黄色部分为选择器hack,它们可以结合使用。此外Firefox和Chrome也有它们专有的hack,详细hack方式及使

    用示例如下:

    Firefox:

    @-moz-document url-prefix()    /*写在选择器外层时(只可写在此处):Firefox only*/

    Chrome:

    @media screen and (-webkit-min-device-pixel-ratio:0)    /*写在选择器外层时(只可写在此处):Chrome only*/

    使用示例-写在选择器前面:

    @-moz-document url-prefix()    /*Firefox*/

    {

            body

            {

                    background-color:pink;

            }

    }

    注意事项:

    浏览器对css的解析是从前到后的,并且采用最后一个样式声明。

     还是不知道怎么区分.好吧,来看个例子:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>区别IE6、IE7、IE8、FireFox的CSS hack - http://www.52css.com%3c/title>
    <style type="text/css">
    <!--
    #test,#note{
        margin:0 auto;
        text-align:center;   
    }
    #test {
        200px;
        height:30px;
        border: 1px solid #000000;
        color:#fff;
        line-height:30px;
    }
    .color{
        background-color: #CC00FF;        /*所有浏览器都会显示为紫色*/
        background-color: #FF0000\9;    /*IE6、IE7、IE8会显示红色*/
        *background-color: #0066FF;        /*IE6、IE7会变为蓝色*/           
        _background-color: #009933;        /*IE6会变为绿色*/
    }
    -->
    </style>
    </head>

    <body>
    <div id="test" class="color">测试方块 www.mycsu.net </div>

    <div id="note">
        <strong style="color:#009933">IE6</strong>
        <strong style="color:#0066FF">IE7</strong>
        <strong style="color:#FF0000">IE8</strong>
        <strong style="color:#CC00FF">FireFox</strong>
    </div>
    </body>
    </html>

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

    background: red;       /* 对FF Opera和Safari有效 */
    #background: blue;      /* 对 IE6 和 IE7有效 */
    _background: green;      /* 只对IE6有效 */
    /*/background: orange;*/      /** 只对IE8有效 **/

    !important         /*FF、IE7有效*/

    *         /*IE都有效*/

    ============================================================

    IE8是可以和IE7兼容的,简单一行代码,让IE8自动调用IE7的渲染模式
    只需要在页面中加入如下HTTP meta-tag:
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    只要IE8读到这个标签,它就会自动启动IE7兼容模式,保证页面完整展示。

  • 相关阅读:
    C#-WebForm-★★★JQuery-动画★★★
    C#-WebForm-★★★JQuery知识——DOM操作★★★
    C#-WebForm-★★★JQuery知识——基础知识、选择器、事件★★★
    C#-WebForm-组合查询(Queryable延迟查询、Intersect交集)、分页展示基础
    C#-WebForm-★★★LinQ-数据的条件组合查询并进行分页展示(未加各种限定)★★★
    C#-WebForm-光棒效果
    C#-WebForm-LinQ-条件精确查询、高级查询
    C#-WebForm-LinQ(一)-LinQ:语言集成查询(Language Integrated Query)-增删改查、属性扩展
    C#-WebForm JS定时器
    ★★★正则表达式★★★
  • 原文地址:https://www.cnblogs.com/wuchao/p/2596867.html
Copyright © 2020-2023  润新知