本文由 Kayo Lee 发表，本文链接：http://kayosite.com/the-methods-make-css-only-for-ie.html
因为万恶的 IE 存在各种的不标准，因此，在进行页面开发时不免要为 IE 单独写一些 CSS 。熟悉的方法有 IE hacks 和条件注释 CSS（Conditional Stylesheets），下面，不妨讨论一下这两种方法的优缺点。
IE hacks
举个例子，一个元素在其他浏览中的左边距是 30px ，而在 IE6 中则设置为 20px ，可以如下编写：
|
1
|
.demo {margin-left: 30px; _margin-left: 20px; } |
对我个人而言，喜欢条件注释 CSS 是胜于 IE hacks ，光是 IE hacks 里面带有“hacks”这个单词已经让人很不舒服，总觉得这是偏方，而且是很偏的解决方案。但是，IE hacks 也有它的优点——
- CSS hacks 内嵌在普通的 CSS 里面，不会产生更多 HTTP 请求。
- CSS hacks 内嵌在普通的 CSS 里面，编写时比较方便。
当然，它的缺点也很明显——
- 它是不标准的产物。
- 内嵌在其他 CSS 中，不便维护。尤其是当 hacks 的数量比较多的时候维护简直是个恶梦。
- 内嵌在其他 CSS 中，即使在非 IE 浏览器中也会被加载，浪费资源。
条件注释 CSS
同样是上面的例子，如果使用条件注释 CSS ，可以如下编写：
HTML
|
1
2
3
|
<!--[if IE 6 ]> <link rel="stylesheet" type="text/css" media="all" href="./ie6.css" /><![endif]--> |
ie6.css
|
1
|
.demo {margin-left: 20px; } |
这里说明一下：条件注释是一种 IE 专有的、对常规（X）HTML 注释的 Miscrosoft 扩展。从 W3C 标准来说，它也是不标准的产物，但它是微软官方推出的针对 IE 进行开发的方式，并且条件注释对于其他所有浏览器作为常规注释出现，因此对其他浏览器无害。
条件注释 CSS 的好处是在独立的 CSS 文件中编写，能准确控制在特定的 IE 中加载，不会造成资源浪费，并且便于维护。缺点就是会产生多余的 HTTP 请求，尤其是当你需要兼容的 IE 版本很多的时候，你就需要产生多个 HTTP 请求，这对于本来通道数目就少的低版本 IE 来说无疑会影响页面加载速度。
条件注释只能在IE5+的环境之下。
默认的CSS样式应该位于HTML文档的首行，进行条件注释判断的所有内容必须位于该默认样式之后。
并且<!--与 -->的内容和注释标记之间不能有任何的空格，否则会出错，无法正确的读取IE的CSS文件。
显然，以上两种方法都不是很好的方法，因此，接下来介绍一种相对来说更好的解决方案。
条件注释 html 标签
这种方案也是利用条件注释，但并不是对 CSS 使用条件注释，而是对 html 标签使用条件注释，引入不同的 class ，从而区分不同的 IE 以及其他浏览器。例如：
|
1
2
3
4
5
6
|
<!DOCTYPE html><!--[if IE 6 ]> <html class="ie6 lte_ie6 lte_ie7 lte_ie8" lang="zh-CN"> <![endif]--><!--[if lte IE 6 ]> <html class="lte_ie6 lte_ie7 lte_ie8" lang="zh-CN"> <![endif]--><!--[if lte IE 7 ]> <html class="lte_ie7 lte_ie8" lang="zh-CN"> <![endif]--><!--[if lte IE 8 ]> <html class="lte_ie8" lang="zh-CN"> <![endif]--><!--[if (gte IE 9)|!(IE)]><!--><html lang="zh-CN"><!--<![endif]--> |
然后把针对特定 IE 的 CSS 加上相应的 class 并写在普通 CSS 文件里即可。例如上面的例子则可以在 CSS 文件里编写：
|
1
|
.ie6 .demo {margin-left: 20px; } |
这种方法吸收了条件注释表达式的好处同时又不会产生多余的 HTTP 请求，只是由于这些针对特定 IE 的 CSS 与普通的 CSS 放在一起，即不是相应的 IE 也会被加载，因此如果 CSS 数目比较多的话就会像使用 hacks 那样，造成浪费，开发者需要根据具体情况选择方法。
