为了解决浏览器兼容性问题常用的几个 CSS 技巧 (trick)
由于 IE 和其他一些浏览器的盒模型(box model)解释不同, 以及一些对 CSS 标准解释的偏差，现在要想编写兼容的 CSS 代码真是越来越困难了。 下面随便说几点常见的修正 bug 的方法。
例子1：( IE 中 hover 行为的 bug ? )
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="Roger Chen">
<meta name="keywords" content="">
<meta name="description" content="">
<style>
#div1 {background: lightblue; width: 150px; border: 1px solid red;}
#div1 a {display: block; border: 20px solid green; margin-right: 20px;}
#div1 a:hover {background: orange;}
</style>
</head>
<body>
<div id="div1"><a id="link1" href="#">Link</a></div>
</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
例子1：( IE 中 hover 行为的 bug ? )
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="Roger Chen">
<meta name="keywords" content="">
<meta name="description" content="">
<style>
#div1 {background: lightblue; width: 150px; border: 1px solid red;}
#div1 #div1 a {display: block; border: 20px solid green; margin-right: 20px;}
#div1 a:hover {background: orange;}
</style>
</head>
<body>
<div id="div1"><a id="link1" href="#">Link</a></div>
</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
