兼容不一样浏览器的 CSS Hack 写法

所谓 CSS Hack,是指在 CSS 代码中嵌入诸如 *,*html  等代码,方便于独立控制某种浏览器的具体样式。好比有些 CSS Hack 只能被 IE6 或 IE7 识别,而 Firefox 等浏览器则不能识别。这样一来能够有效控制 CSS 在不一样浏览器的表现,避免撰写多个 CSS 文件。

芒果在这里大体整理了经常使用 CSS Hack 的写法,帮助你更好地控制页面呈现:

1. * 符号

IE 浏览器能识别 * 符号,但其余浏览器诸如 Firefox、Opera、Chrome 等不能识别 * 符号。

例:在 Firefox 和 IE 中呈现不一样的文字颜色:html

  1. color:red;*color:blue;
  2. //在 Firefox 等非 IE 核心浏览器中,文字呈现红色;而 IE 中呈现蓝色。

2. !important

IE7 不但能识别 * 符号,还能识别 !important,而 IE6 只能识别前者。

例:在 IE6 和 IE7 中呈现不一样的文字颜色:浏览器

  1. color:red !important;color:blue;
  2. //在 IE7 浏览器中,文字呈现红色;而 IE6 中呈现蓝色。

综合 1 和 2,利用上述浏览器特性,可在 CSS 中判别 Firefox,IE7,IE6 并加载不一样样式。
例:在 Firefox,IE7,IE6 中呈现三种不一样文字颜色:spa

  1. color:blue;*color:red !important;*color:green;
  2. //在 Firefox 中,文字呈现蓝色,在 IE7 浏览器中,呈现红色;而 IE6 中呈现蓝色。

4. *html 和 *+html
IE 核心的浏览器能识别*html 和*+html,而 Firefox 等非 IE 核心浏览器不能识别。

例:在 Firefox,IE7,IE6 中呈现三种不一样文字颜色:code

  1. #div {color:red;}
  2. *html #div {color:green;}
  3. *+html #div{color:blue;}
  4. //第一句 Firefox 等能够正常识别,因此这些浏览器中文字呈红色;
  5. //第二句 IE6 能识别并执行,用于针对 IE6 独立写的样式,文字绿色;
  6. //第三句只有 IE7 才能正确识别,而 IE6 和其余非 IE 核心浏览器不能,文字呈蓝色。
相关文章
相关标签/搜索