CSS中浏览器解决方案 一

NN 4.x

很幸运我们生活在这个时代。这个10年前的古董浏览器,网景导航家（Netscape Navigator）4.x，终于只剩下0.3%的市场份额，大部分网站也声明不再支持。它有着最基本的CSS支持，而且依然有不少死忠（我相信越来越少），所以依然有设计师为它设计样式。但最多只能改变下字体，颜色等最基本的东西了。所以，我是说假如，你还要顾及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

在此我们指Windows平台上的IE 5.0和IE 5.5。CSS的支持依然很糟糕，但是比起NN 4.x已经有了长足的改变。它们臭名昭著错误的盒状模型（Box model）可能是导致CSS界第一个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，并在值中设置一些CSS转义引号（CSS-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. 这才是我们需要的真正宽度 */
}

这条hack会导致同时期的Opera一些小问题，但新版已经没有任何问题了。考虑到非IE用户都乐意升级他们的浏览器，所以这个不是问题，不用多加考虑。

Tantek Çelik后来还发明了更佳的方式来对待IE 5.x/Win，叫做滤器（filter）。这跟对NN 4.x隐藏样式有类似之处，只不过这是针对其他浏览器隐藏，IE 5.x/Win自己可识别。不过这许多额外的CSS文件。Tantek Çelik称之为Band Pass Filter.

IE 5.0x/Win的filter：

@media tty {
 i{content:"/";/*" "*/}}; @import 'ie50winbandpass.css'; {;}/*";}
}/* */

IE 5.5x/Win的filter：

@media tty {
 i{content:"/";/*" "*/}}@m; @import 'ie55winbandpass.css'; /*";}
}/* */

这样，就可以将针对IE 5.0x/Win的CSS写到ie50winbandpass.css中了，同理，IE 5.5x/Win的则是ie55winbandpass.css。需要了解工作原理等更多东西，可以访问http://tantek.com/CSS/Examples/。

还有许多同样会在IE6中出现的问题，我们将在IE6部分中讨论。另外，如果您已经没有老机器或者老系统来跑这两个浏览器，可以到http://browsers.evolt.org/?ie/32bit/standalone中下载绿色版。

那么，我们要来讨论另外一个常被我们忽略的IE 5.x浏览器了，没错，Mac OS上的IE。

IE 5.x/Mac

同时期，IE5.x/Mac（前面提到的Tantek Çelik领头开发的）是最先进的浏览器，它的Tasman引擎支持CSS 1, HTML 4.01, PNG 1.0，同时还支持在2000年看来十分先进的子选择器（child seletor）和相邻选择器（sibling selector）。就是说，它也有本身的毛病。

IE 5.x/Mac的问题主要体现在定位元素，浮动，不必要的滚动条，过宽的元素，不正确的覆盖，奇怪的边界等的处理上。见附表。

对IE 5.x/Mac隐藏CSS，最有名的hack叫做注释反斜杆hack（Commented Backslash Hack）：

#isnotMacIE5 { display: none;  }
#isMacIE5 { display: block; background-color: #060; color: #fff; }

/* commented backslash hack v2 /*/
#isnotMacIE5 { display: block; background-color: #060; color: #fff; }
#isMacIE5 { display: none; }
/* end hack */

IE 5.x/Mac碰到了反斜杆（/），就将*号转义（escape），从而直到碰到下一条注释才认为注释结束，把一整段都当作注释对待，达到隐藏目的。

当然，还有hack能够让你的样式（表）只对IE 5.x/Mac显示。由Tantek Çelik开发，Douglas Bowman 文档的IE5/Mac Band Pass Filter：

/*/*//*/
@import “ie5mac.css”;
/**/

这反转了Commented Backslash Hack，对IE 5.x/Mac显示了ie5mac.css，而其他浏览器会视而不见。如果您需要为IE 5.x/Mac设计，IE5/Mac Band Pass Filter将是最有用的工具。

div {
	position: absolute;
	right: 0;
	bottom: 0;
}

div {
	right: 15px;
	margin-right: -15px;
	bottom: 15px;
	margin-bottom: -15px;
}

table {
	margin: 0 auto;
}

table {
	margin-left: auto;
	margin-right: auto;
}

预告：第二部分讨论IE6，第三部分讨论基于Gecko的浏览器（Mozilla Suite, Firefox, Camino等），Safari和Opera。