CSS招数和过滤器

在开发Web应用程序时，为了兼容各个厂家的浏览器，有时需要采用CSS过滤器和招数来实现不同的浏览器表现相同的策略。

CSS过滤器(filter)是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。

CSS招数是(hack)一种让浏览器表现得符合自己希望的并不完美的解决方法。

当浏览器的bug在未来的版本中得到修复之后，某些招数会失效或者会有怪异的表现，而且可能无法通过CSS最新版本的检验。在设计浏览器的表现时，能够不使用招数的时候尽量不要使用。CSS招数只是CSS规范的一种解决问题的手段，但不可对这种技术产生依赖。在使用CSS招数的时候，要确定表现是否因为bug的原因，会不会有其他方面的原因，比如HTML，或CSS本身的代码错误。

IE的有条件注释

要想将一个特定的样式表交给IE5和更高的所有版本，那么可以在(X)HTML文档的开头放置以下代码：

<!-- [if IE]
<style type="text/css">
@import ("ie.css");
</style>
-->

<!– –>是HTML的注释代码，Windows上的IE5或更高版本能够识别ie.css，而其他浏览器会忽略这段代码。例如：IE5.0中：

<!-- [if IE 5]
<style type="text/css"
@import ("ie50.css");
</style>
-->

子选择器招数

Windows上的IE6和更低版本不支持子选择器，所以可以使用它对这些浏览器隐藏规则。确保子选择器前后没有空格。

html>body {
  background-image: url("bg.png");
}

属性选择器招数

许多现代浏览器支持属性选择器，但是IE6和更低版本不支持它。

div[id="content"] {
  background-image: url("bg.png");
}

星号HTML招数

最著名且最有用的CSS过滤器之一是星号HTML招数。它可以指定IE6和更低版本。HTML元素是网页的根元素。但是IE的所有当前版本有一个匿名的根元素，它包围着HTML元素。可以使用通用选择器指定包围在另外一个元素中的HTML元素。因为这种情况只在IE6和更低版本中出现，所以将特定的规则应用于这些浏览器。

a:hover {
  border: 1px dotted black;
}
/* for <= ie6 */
* html a:hover {
  border-style: solid;
}

IE/Mac注释反斜线招数

Mac上的IE5错误地允许在注释内部进行转义，这个过滤器的工作方法是在结束注释字符串前面添加一个反斜线。其他浏览器都会忽略这个转义，但IE5/Mac会忽略下一个注释之前所有的代码。

/* Hidding from IE5/Mac \*/
#nav a {
  width: 5em;
}
/* End Hack */

结合使用星号HTML招数和注释反斜线过滤器，可以对Windows上的IE6和更低版本应用规则。

/* Hidding from IE5/Mac \*/
* html {
  height: 1px;
}
/* End Hack */