解决|浏览器

如果世界是美好的，浏览器都没有缺点，W3C的规范清晰明了，而这篇文章也永远不会出现。Welcome to the real world. 在这篇文章中，我们将会探讨几个主流浏览器的在Web标准（或者规范）下存在的典型问题/臭虫，提供相应的解决方案（hacks/filters）。

NN 4.x

很幸运我们生活在这个时代。这个10年前的古董浏览器,网景导航家（Netscape Navigator）4.x，终于只剩下0.3%的市场份额，大部分网站也声明不再支持。它有着最基本的支持，而且依然有不少死忠（我相信越来越少），所以依然有设计师为它设计样式。但最多只能改变下字体，颜色等最基本的东西了。所以，我是说假如，你还要顾及NN 4.x的话，比较合适的做法是，做一个基本样式给它用，并对其隐藏不可识别的高级样式（给其他浏览器用）。很容易做到，因为NN 4.x不认import。举例如下：

<link rel="stylesheet" tyle="text/css" href="basic.css" /><style type="text/css">import(advance.css)</style>

这个方法屡试不爽。但请注意，这也不是没有副作用。假如只使用了import而没有link的情况下，可能会导致IE的瞬间无样式（FOUC，详见www.bluerobot.com/web/css/fouc.asp。幸好，NN 4.x只能识别screen这个媒体类型（media type），所以，避免FOUC也不是没有办法：

<link rel="stylesheet" tyle="text/css" media="screen, projection" href="advance.css" />

到此为止，我们不要为它浪费过多精力，除非你的老板还在用它。

IE 5.x/Win

在此我们指平台上的IE 5.0和IE 5.5。的支持依然很糟糕，但是比起NN 4.x已经有了长足的改变。它们臭名昭著错误的盒状模型（Box model）可能是导致界第一个hack的出现。我们先来看看盒状模型。W3C规范的盒子，可以使用“相加”来描述，即，一个元素的实际盒子宽度是由内容宽度（content width）,边框（border），边距（padding）堆积起来的。而IE 5.x/Win则可以用“相减”来描述，也被称为边框盒状模型（border box model），一个元素的实际宽度就是该元素的width设值，边框，边距都从中减去。

来看一个例子：

div {width: 200px;margin: 20px;padding: 20px;border: 5px;}

依照W3C规范，这个div实际所占宽度是5px + 20px + 200px + 20px + 5px。而对IE5.x/Win的边框盒状模型来说，这个div实际宽度就是200px，而内容宽度被压迫到只有150px：200px - 5px - 20px - 20px - 5px。这时候，传说中的牛人Tantek Çelik（负责IE5.x/Mac的前微软员工，现在经营Technorati，Microformats创始人和贡献者之一）出现了，带来了Box Model Hack. 该hack使用了IE 5.x/Win不支持的voice-family，并在值中设置一些转义引号（-escape quotes） ，欺骗IE 5.x/Win认为规则块（declaration block）已经闭合。

div { /*为了更好说明，width调了一下写作习惯*/margin: 20px;padding: 20px;border: 5px;width: 240px;           /* 1. IE 5.x/Win需要的宽度 */voice-family: "\"}\"";  /* 2. IE 5.x/Win看见了}，认为规则已经结束了 */voice-family: inherit;  /* 3. 能够正确解析的浏览器重置该值 */width: 200px;           /* 4. 这才是我们需要的真正宽度 *