CSS忍者:安全的CSS hacks秘籍

开发 前端
你如何搞定 IE 这只难以驯服的怪兽?使用 CSS Hacks 或者条件注释么?恐怕没有什么解决方案是完美的。每个设计师或者前端码农都会有自己打败 IE 行之有效的方法。所有这些技术都各有利弊,让我们一起来看看。

通过条件判断引入样式表

使我们能很容易在 IE 浏览器中通过条件注释语句加载指定样式表,而其他非 IE 内核浏览器则自动忽略这段蹩脚的 HTML注释。下面是一个例子:

  1. <!--[if IE 8]><link rel="stylesheet" href="ie8.css"><![endif]--> 
  2. <!--[if IE 7]><link rel="stylesheet" href="ie7.css"><![endif]--> 
  3. <!--[if IE 6]><link rel="stylesheet" href="ie6.css"><![endif]--> 

这段代码会导致 IE8、IE7、IE6 各自加载对应的样式文件。这事实上是非常牛逼的,条件注释给按浏览器加载各自不同的样式表提供了可能,但同时需要维护多个样式文件。

CSS hacks

这事实上是个龌龊的做法,能解决问题又不符合规范,看着也很头大。大部分人看着它只能束手无策而又逼不得已。现在可以来简单回顾一下IE 的 CSS hacks 常用的几个方法:

  1. _selector{property:value;} //IE6  
  2. *selector{property:value;} //IE6 & IE7  
  3. selector{property:value\9;} //IE6 & IE7 & IE8 

这个一般人都知道,就不多说了。但面临的一个现实问题是,\9 这个 hack 不只是针对 IE8 以及更老版本奏效,IE9 最终的发行版依旧会受到这个 hack 的影响。而 IE9 本身在 CSS 上的各种缺陷又是被修复的。如果将来 IE10、IE11 来了,那又怎么办?显然 \9 并不是一个严谨的安全的方案。

另外,采用不同的 X-UA-Compatible 模式也会影响不同版本的 IE 渲染差异。建议设置默认渲染模式如下:

  1. <meta http-equiv="X-UA-Compatible" content="IE=Edge">//标准 IE 模式 

那咋整呢?咋整咋整咋整?没事,下面还有更绝的。

通过条件判断插入指定类

既然可以用条件判断,那么直接为不同 IE 版本输出单独用于设定样式的钩子类好了。直接上代码:

  1. <!--[if !IE]><html><![endif]--> // 非 IE 浏览器的情况,不添加任何作用类  
  2. <!--[if IE 6]><html class="ie6"><![endif]--> 
  3. <!--[if IE 7]><html class="ie7"><![endif]--> 
  4. <!--[if IE 8]><html class="ie8"><![endif]--> 

如果要是 IE9、IE10 再想出现什么神奇的行为艺术的话,继续添加指定作用类就行咯。并且你的样式表也会变得异常干净、整洁、美观:

  1. .selector { color: black; }  
  2. .ie8 .selector { color: green; } /* IE8 */  
  3. .ie7 .selector { color: blue; } /* IE7 */  
  4. .ie6 .selector { color: red; } /* IE6 */ 

当然,标准模式的 X-UA-Compatible 声明还是必须的,以防页面被强制按照低版本的 IE 来渲染。

关于条件注释的参考资料:http://msdn.microsoft.com/en-us/library/ms537512.aspx

【编辑推荐】

  1. 44个惊人的超炫CSS3动画演示
  2. 六月最佳的HTML 5和CSS3教程强烈推荐
  3. HTML 5+CSS3携手实现Mobie App的瓶颈
  4. CSS的未来:一些试验性CSS属性
  5. 一个超棒的CSS小工具:最佳Web性能优化
责任编辑:陈贻新 来源: 芒果
相关推荐

2009-07-15 18:23:36

跨流览器多列布局

2010-09-02 13:53:58

CSS Sprites

2010-09-13 13:44:35

CSS表格CSS表单

2017-08-22 16:25:14

CSSHTML选择器

2021-08-19 06:58:48

CSS页面布局

2023-11-01 08:36:07

CSSTailwind

2010-09-02 09:59:52

CSS SpritesCSS

2020-07-24 15:40:51

CSS前端代码

2017-04-27 14:05:59

CSS动画前端

2011-08-23 09:52:31

CSS

2015-04-29 11:10:23

css sprite雪碧图生成工具

2011-04-29 10:22:49

CSS高性能Web开发

2011-05-17 09:36:57

div+css

2011-06-02 10:04:53

CSS

2015-10-09 09:43:28

CSS CSS3

2010-08-16 14:18:49

DIV+CSS

2022-09-02 08:00:00

CSS开发框架

2022-04-07 07:31:30

CSSCSS Reset前端

2010-09-09 10:56:56

CSS

2022-02-22 07:50:10

CSS前端CSS-doodle
点赞
收藏

51CTO技术栈公众号