`
zachary.guo
  • 浏览: 483057 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

CSS Hack

阅读更多
        原文出处:http://blog.csdn.net/arcow/archive/2007/07/06/1681027.aspx
        参考文章:http://www.iteye.com/topic/602506

什么是 CSS Hack
        由于不同的浏览器,比如 Internet Explorer 6, Internet Explorer 7, Mozilla Firefox等,对 CSS 的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。
        这个时候我们就需要针对不同的浏览器去写不同的 CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
        这个针对不同的浏览器写不同的 CSS code 的过程,就叫 CSS hack,也叫写 CSS hack。

CSS Hack 的原理是什么
        由于不同的浏览器对 CSS 的支持及解析结果不一样,还由于 CSS 中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的 CSS。
        比如 IE6 能识别下划线 _ 和星号 *,IE7 能识别星号 *,但不能识别下划线 _,而 FF 两个都不能认识。等等。
        书写顺序,一般是将识别能力强的浏览器的 CSS 写在后面。下面如何写里面说得更详细些。

如何写 CSS Hack
        比如要区分 IE6 和 FF 两种浏览器可以这样写:
<style>
  div {
    background: green; /* for FF */
    *background: red;  /* for IE6 */
  }
</style>

        上面的 css 在 FF 中,它是认识不了后面的那个带星号 * 的东东是什么的,于是将它过滤掉,不予理睬,解析得到的结果是: div { background: green },于是理所当然这个 div 的背景是绿色的。
        在 IE6 中呢,它两个 background 都能识别出来,它解析得到的结果是: div { background: green; background: red; }, 于是根据优先级别,处在后面的 red 的优先级高,于是,IE6 下的 div 的背景颜色就是红色的了。

CSS hack: 区分IE6,IE7,FF
// 区分 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 和 FF 均不支持下划线。于是大家还可以这样来区分 IE6,IE7,FF:
background: orange;
*background: green;
_background: blue;

        注:不管是什么方法,书写的顺序都是 FF 的写在前面,IE7 的写在中间,IE6 的写在最后面。
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics