CSS IE7 IE6 Firefox多浏览器兼容(3)

 子选择器招数(Hack) 

最安全的过滤器依赖于未实现的CSS，而不是浏览器Bug。因为这些过滤器使用有效的CSS选择器来应用有效的声明，所以严格地说，他们根本不是过滤器。他们仅仅是某些浏览器所不能理解的有效CSS规则。这些过滤器中的第一个称为子选择器招数。Windows上的IE6和更低版本的IE不支持子选择器，所以可以使用它对这些浏览器隐藏规则。为了让这种过滤器起到作用，必须确保在子选择器前后没有空格。

在这个示例中，使用子选择器招数（Hack）对IE 5-6/Win 隐藏透明的北京PNG图象。

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

IE7 预期会支持子选择器，还会支持PNG透明度。通过以这种方式使用子选择器，就允许IE的新版本看到透明背景，而不需要修改代码，因而提供了向前兼容性。等于ie5，i56视而不见，而IE7可以用得恰当好处，这里并不是多浏览器兼容，而是向前兼容。

属性选择器招数(Hack)

另一种过滤器规则的有趣方法是使用属性选择器。许多当前的浏览器（比如 Safari–Mac苹果上的  和Firefox IE7）支持使用属性选择器，但是IE6并不支持它。因此，可以使用属性选择器在比较高级的浏览器中对类和ID应用样式。在这个示例中，使用属性选择器在 符合标准的浏览器中将背景PNG应用于内容div:

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

你可以用这些让不同浏览器显示出不同的效果，当然也可以使用它在多浏览器里显示同样的效果。

 

 

对于CSS当中让IE7、IE6、Firefox兼容最著名且最有用的CSS过滤器之一是星号 * Html HACK。这个过滤器非常容易记住，它可以制定IE6和更低版本。正如你知道的，Html 元素被认为是网页上的第一个元素，即根元素。但是，IE 的所有当前版本有一个匿名的根元素，它包围着Html 元素。那么这个匿名的元素或者说隐藏的元素到底是什么元素呢？其实它就是鼎鼎大名的* 号，所以我们可以用星号来指定的规则应用于那些被星号包围的 HTML。

IE6以及更老的IE5.5

* html {
  font-size:small;
}

在任何非ie的浏览器因为没有这个规则（Html元素被*号包围），所以其他的浏览器就会当作看不见，所以当你指定这个规则的时候，你可以放心的应 用在IE6以及前一版本的IE5.5要展示效果中。IE 7 并没有完全去掉这个 Hack。而是用这样的办法来让过滤，那就是用 *+

IE7

*+html {
  font-size:small
}

这样的表达，就是说除了IE7能认识这个font-size:small以外，其他的浏览器都不会看到这一条的，可以说这是IE7的专属Hack。

这样的方式可以写在同一个CSS文件，并且同时都会针对不同的浏览器产生独特的效果。所以在设计页面或者样式的时候，你不妨用FireFox 来做第一浏览器，对照Firefox样式写好后，再把页面放到IE7下看看，进行适当的调整，再放到IE6下面看看，进行适当的调整。基本上按 照<div><ul><li></li></ul></ul>的顺序嵌套的 话，IE6根IE7的规则是差不多的。调好了IE6的样式就等于调好了IE7的样式，反之亦然。再者，用Firefox来写样式还是更符合W3C一些，因 为IE6和IE7要考虑到以前的兼容性，不得不在规范上做些让步，达到兼容的目的。虽然大家都很憎恶为什么多一个Firefox，但是这是没办法的:(。 你要掌控它而不是被它掌控了^_^。

基本上用星号搭配搞定IE6，IE7，Firefox以后，像Opera之类的浏览器也会正常显示的。就不用单独考虑他们的兼容问题了。