为了解决浏览器兼容性问题常用的几个 CSS 技巧 (trick)

由于 IE 和其他一些浏览器的盒模型(box model)解释不同, 以及一些对 CSS 标准解释的偏差，现在要想编写兼容的 CSS 代码真是越来越困难了。下面随便说几点常见的修正 bug 的方法。

例子1：( IE 中 hover 行为的 bug ? )

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
为了解决浏览器兼容性问题常用的几个 CSS 技巧 (trick)

"http://www.w3.org/TR/html4/strict.dtd">
为了解决浏览器兼容性问题常用的几个 CSS 技巧 (trick)

<html>

<head>

<title> New Document </title>
为了解决浏览器兼容性问题常用的几个 CSS 技巧 (trick)

</style>

</head>

<body>

<div id="div1"><a id="link1" href="#">Link</a></div>
为了解决浏览器兼容性问题常用的几个 CSS 技巧 (trick)

</body>

</html>

如果你把这个代码放在 IE 和 Mozilla 中运行，会发现细微的区别。当我们利用 CSS 将一个 inline 的标签 <a> 显示为 block 的时候， IE 和 Mozilla 产生的效果里， block 的大小似乎是一致的（黑色的边框是为了方便判断大小而设置的）。然而仔细观察能够发现： Mozilla 中显示的 <a> 标签扩展到了整个 <div> 的宽度，鼠标只要在右端晃一下就能显示出高亮时的橙色背景。而 IE 里的却必须晃到其内含的文字上面才会有反应。在基于 Web 标准的设计中，常常用 <ul> 和 <a> 等简单的标签配合 CSS 来创建网页导航菜单，这个问题如果不解决，会影响到实际显示的效果。

让我们来尝试一下给 <a> 加一个 width: 100% 的样式：

#div1 a {display: block; border: 20px solid green; margin-right: 20px; width: 100%;}

可以看到，这次 hover 的问题解决了，但是在 Mozilla 里的显示变得很奇怪， <a> 的右边跑到 <div> 外面去了。当然，这个也是有办法修正的，只需要再加一行 CSS 代码：

html>body #div1 a {width: auto;}

html>body 这个语法是 IE 所不能识别的一种选择符，所以在 IE 中会忽略这一行，而 Mozilla 中则由于这个代码而得到修正。（用 auto 替换掉上面定义过的 100% 宽度。因为 CSS 中同一个级别的样式后面的会覆盖前面的。）

现在可以看到，在 IE 和 Mozilla 下的外观和鼠标高亮的行为方式有了大致的统一。当然，由于盒模型的解释不同，最后的结果还存在着两者宽度不一致的问题。

本来想多小结几个的，刚写了这么一点感觉要找全资料还真不容易。看来剩下的只好留给以后慢慢总结吧。

进一步阅读：
http://www.positioniseverything.net/
http://www.positioniseverything.net/ie-primer.html
http://www.positioniseverything.net/articles/float-bugs-1.html
http://www.positioniseverything.net/articles/box-model.html