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

在理想的环境中,编写正确的CSS会在支持CSS的每个浏览器中正常工作。不幸的是,我们并不是生活在理想的世界中,浏览器有不少的Bug和不一致的地方。为了创建能够在各种浏览器上显示相同样式的页面,CSS开发人员需要发挥创造性。通过利用Bug(hack)和未实现的CSS,开发人员能够选择性地对不同浏览器应用不同地规则。“招数Hack”和“过滤器”是CSS开发人员地强大工具。但是,正因为功能强大,使用时应该谨慎。了解各种常用招数Hack以及他们地工作原理确实很重要。但是,了解在什么时候应用他们以及什么时候不应该使用也同样重要。

在后面讲陆续讲这样的一些东西。

  1. 招数和过滤器之间的差异。
  2. 好的过滤器和差的过滤器以及如何复责任地使用他们。
  3. IE地有条件注释。
  4. 星号Html过滤器和星号、加号Html过滤器。
  5. 注释反斜线过滤器和Holly招数。
  6. 反斜线过滤器和修改后地简化框模型招数(MSBMH)。
  7. !important 和下划线过滤器。
  8. 子过滤器和属性过滤器

多浏览器兼容是一件苦力活,其实没有什么难度,针对不同地浏览器利用上面讲地方法,适当地写上不同浏览器支持地样式,这样多浏览器在一块就和谐了。 甚至在不同的操作系统也可以和谐共处。比如MAC和PC。要相信自己能够战胜这样的困难,多浏览器兼容需要不停的调试,需要耐心,我以前曾写过一个没有利 用任何Bug(Hack、!important)的CSS,也可以完美支持所有的浏览器,虽然一个页面的CSS需要几天来调试,但是这件苦力活并不是不可能完成的。其实还是一句老话,世上无难事,只怕有心人。

Hack和过滤器其实是一种迫不得已的办法,不要稍微掌握了几招然后就开始炫耀,到处乱写,虽然能够达到你的最初目的。不要到了完工的时候看一看你的CSS文件似乎到处是Hack,到处都是补丁,似乎已经为每个浏览器都量身定做了一遍CSS。在使用hack和过滤器的时候其实更应该多理解CSS的标准规范,实际上要用到hack的情况是很少的。Hack本身一词也是不包含正面意义的,而是讲这是一种迫不得已的行为,是利用了不正确的浏览器行为。

作为一般规则,使用以来与不支持的CSS的过滤器,而不是依赖于某种浏览器bug的过滤器,这可能比较安全。

对比相对高级的浏览器应用规则和生命,同时可以确定老式的浏览器会平稳的退化。当浏览器新版本发布时候,如果它现在支持你作为过滤器使用的CSS,那么它应该会如预期那样工作。因为浏览器会越来越符合标准,如果使用比较高级的CSS克服老式浏览器中的问题,这个问题很有希望在新的版本中得到解决。因此,使用不支持的CSS作为过滤机制是一种相对安全的方法。之所以说“相对”是因为浏览器有可能支持新的CSS,但是仍然表现出你试图修复的Bug。

因为使用依赖于解析bug的过滤器是一种有点冒险的方法。这是因为依赖于bug而不是特性。与前面的方法相似,如果解析bug被修复了,而你试图修 复的bug还没有得到解决,那么可能会遇到问题。但是,更严重的是,解析bug在浏览器的新版本中可能有新的表现形式。例如,假设Firefox的一个新 版本有某个解析bug。如果使用这个bug作为过滤器向IE提供不同的宽度值,从而解决专用框模型的问题,那么Firefox有可能突然继承这个宽度,这 可能会破坏许多站点的设计。

CSS中,有许多方法可以实现同样的效果,所以如果某些东西造成了问题,那么可以尝试另一种方法。许多CSS错误是由过分复杂的代码和标记造成的。如果使代码保持简单了,那么可以避免使用大多数招数Hack。

那么应该使用怎样的策略保证一个网站的CSS简单明了,而且又能适应众多浏览器呢?如果经过充分的思考,认识到只能应用某种Hack或过滤器,那么需要以明智且受控制的方式应用它。如果CSS短小而且简单,并且只需要应用很少几个Hack,那么将这些Hack放在主CSS文件中可能是安全的。但是,Hack往往相当复杂,使代码更加难懂。如果CSS文件很长,或者需要使用的招数比较多,那么最好将它们放在它们自己的样式表中。这不但使代码容易阅读,而且如果Hack在新的浏览器中造成了什么问题,那么可以准确的知道它的位置。与此相似,如果决定取消对某种浏览器的支持,那么只需要删除适当的CSS文件,就可以删除相关联的Hack。或者用程序判断浏览器信息,然后链接相应的CSS文件。或者可以用条件注释(见下一篇)。

为了帮助你正确的选择过滤器或者Hack,推荐这个站点(http://centricle.com/ref/css/filters/)。这个站点提供了表格来描述那些过滤器在那些浏览器中是有效的,非常详尽。

常用Hack浏览器匹配图:

常用 css hack

 

posted on 2008-12-09 17:02  Adam Duan  阅读(385)  评论(0)    收藏  举报

导航