`
zachary.guo
  • 浏览: 487217 次
  • 性别: 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 的写在最后面。
分享到:
评论

相关推荐

    CSSHack解决兼容

    什么是CSS hack: 由于不同的浏览器,对CSS的解析认识不一样,从而导致生成的页面效果不一样,得不到我们所需要的页面效果。 针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack

    CSS hack技巧大全

    【CSS Hack技巧大全】 在网页开发中,CSS(层叠样式表)的兼容性问题一直是一个挑战,尤其是在处理不同浏览器间的表现差异时。CSS Hack是一种技术,用来解决这些差异,确保样式在各种浏览器中都能正确呈现。本文将...

    css_hack csshack技术

    ### CSS Hack 技术详解及应用 #### 一、引言 随着互联网技术的发展,Web前端开发变得越来越重要。然而,在实际开发过程中,一个不容忽视的问题便是**跨浏览器兼容性**。由于不同浏览器(包括同一浏览器的不同版本...

    css safari浏览器识别CSS hack.docx

    在网页设计和开发中,CSS Hack常常用于解决不同浏览器对CSS样式解析的差异问题。本文主要探讨了如何针对Safari浏览器进行CSS Hack,以便在不同的浏览器环境下实现样式的一致性。 首先,我们要明白CSS Hack的基本...

    H5 CSS hack 和浏览器内核

    本文将深入探讨H5 CSS Hack以及与浏览器内核的关系。 首先,我们要明白H5(HTML5)是HTML的最新版本,引入了许多新特性,如语义化标签、离线存储、媒体元素、拖放功能等,极大地提高了网页的互动性和用户体验。然而...

    CSS HACK 兼容列表 Firefox,IE5,IE5.5,IE6,IE7,IE8.rar

    这份名为“CSS HACK 兼容列表 Firefox,IE5,IE5.5,IE6,IE7,IE8.rar”的压缩包,提供了针对这些浏览器的CSS Hack解决方案,以确保在不同环境下页面的正常显示。 CSS Hack通常指的是利用浏览器解析CSS的bug或者特性,...

    css hack浏览器兼容性

    css hack ie6 ie7 ie8 firefox等浏览器兼容性

    各浏览器CSS hack兼容表

    各浏览器CSS hack兼容表各浏览器CSS hack兼容表

    IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表

    "IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表" 提供了一个宝贵的资源,帮助开发者解决在不同浏览器之间存在的CSS样式差异。下面我们将深入探讨这个话题,了解各种CSS hack及其在这些浏览器中的表现。 ...

    CSS hack汇总

    ### CSS Hack 汇总:解决 IE6,IE7,IE8 及 Firefox 的兼容性问题 在网页设计与开发领域,确保不同浏览器间的代码兼容性是一项挑战性的任务,尤其是在处理像 Internet Explorer 6(IE6)、IE7、IE8 和 Firefox 这些...

    史上最全的CSS hack方式一览.mhtml

    史上最全的CSS hack方式一览.mhtml史上最全的CSS hack方式一览.mhtml史上最全的CSS hack方式一览.mhtml史上最全的CSS hack方式一览.mhtml史上最全的CSS hack方式一览.mhtml史上最全的CSS hack方式一览.mhtml史上最全...

    css hack,escape from css hack

    "css hack, escape from css hack"的主题旨在探讨如何避免使用CSS hack,遵循更标准和可持续的实践。以下是一些关键知识点: 1. **使用CSS预处理器**:如Sass、Less或Stylus,它们提供了变量、嵌套规则和混合等功能...

    CSS Hack 浏览器兼容文档

    CSS Hack是一种针对不同浏览器之间解析CSS规则差异的技术,目的是确保CSS样式在各个浏览器中的一致性。在网页设计中,由于各个浏览器(尤其是Internet Explorer的早期版本)对CSS的实现存在差异,导致开发者需要采取...

    CSS hack 兼容标识.rar_CSS hack 兼容标识

    为了解决这些问题,开发者们发展出了一种技术,即“CSS Hack”,以确保样式在各种浏览器中表现一致。本篇文章将深入探讨CSS Hack以及其在解决浏览器兼容性问题中的应用。 首先,CSS Hack的核心在于利用浏览器解析...

    cssHack样式解析

    CSS Hack 样式解析 CSS Hack 是一种解决不同浏览器中 CSS 解析差异的技术。由于不同的浏览器对 CSS 的解析认识不同,会导致生成的页面效果不同。因此,我们需要针对不同的浏览器写不同的 CSS,让它能够同时兼容不同...

    区别不同浏览器CSS hack

    ### 区别不同浏览器CSS Hack知识点详解 #### CSS Hack简介 在Web开发过程中,由于不同浏览器对CSS的支持程度不一,导致同一段CSS代码在不同的浏览器中可能呈现出不同的效果。为了确保网页能在各种浏览器中正常显示...

    CSS Hack是什么

    ### CSS Hack详解 #### 一、CSS Hack的概念与原理 **CSS Hack**是一种技术手段,用于解决不同浏览器间兼容性问题。由于各种浏览器对CSS的支持程度不同,导致相同的CSS代码在不同浏览器上呈现的效果可能存在差异。...

    CSS hack-CSS

    CSS Hack是一种针对不同浏览器之间的CSS解析差异而采取的技术策略,目的是确保网页在各种浏览器中都能得到预期的渲染效果。在Web开发中,由于Internet Explorer(尤其是IE6和IE7)与其他标准兼容的浏览器(如Firefox...

Global site tag (gtag.js) - Google Analytics