zoukankan      html  css  js  c++  java
  • 初涉CSS Hack

    之前调整浏览器兼容基本上没用到CSS Hack技术,所以调整起来相当麻烦,很多时候要一个个像素来调。今天研究了下CSS Hack,感觉受益良多。

    先看下我们可以设定属性的不同符号来调整:
    ———————IE6——    IE7——IE8——IE9---FF——  Opera9.5
    >property——  Y——     Y——    N—— N  ----N——     N
    .property——   Y——     Y——    N—— N --- N——      N
    *property——   Y——     Y——    N——N   ---N——      N
    _property——   Y——     N——    N—— N  ---N——      N

    由此看见都是IE在作怪,那么IE中最令人头疼的要数IE6吧,首先IE6不支持!important,_property也只有IE6支持。

    1、先看个简单的执行顺序:

    View Code
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>css test</title>
    <style type="text/css">
    .test
    {
    color
    :green;
    color
    :red;
    }

    </style>
    </head>

    <body>
    <p id="a" class="test">color test</p>
    </body>
    </html>

    我在各个浏览器测试下都支持顺序覆盖原则。

    2、来看下,设置!important,就能看出IE6与其他浏览器的其别了。

    <style type="text/css">
      .test{
      color:green !important;
      color:red;
      }
    </style>

    上面说过了,IE6不支持优先级,所以red会覆盖green。所以只有在IE6文字的颜色是红的,其他都是绿色的。

    3、然后呢,我有做了简单的修改:

    <style type="text/css">
      .test{
      color:red !important;
      .color:blue !important;
      }
    </style>

    根据顺序规则和最前面的支持情况,在IE6、IE7文字的显示颜色应该是蓝色的,其他浏览器显示红色。

    不是的。我也做了这样的测试:

    <style type="text/css">
    .test{
    color:red !important;
    color:blue !important;
      }
    </style>

    结果是都显示蓝色(当然排除IE6)

    4、做个跟3有点一样的测试

    <style type="text/css">
    .test{
    color:red ;
    .color:blue ;
       }
    </style>

    理论上(我是根据最上面的原则),IE6、IE7显示blue、其他显示red,符合测试。


     

  • 相关阅读:
    Alpha版本冲刺(一)
    福大软工 · 第七次作业
    福大软工 · 第八次作业(课堂实战)- 项目UML设计(团队)
    福大软工1816 · 第六次作业
    福大软工1816 · 第五次作业
    福大软工1816
    福大软工1816 · 第一次作业
    Python学习
    整理一下软工实践这门课的一些链接
    个人作业——软件工程实践总结作业
  • 原文地址:https://www.cnblogs.com/huaizuo/p/2114985.html
Copyright © 2011-2022 走看看