使用DIV+CSS布局时，经常会遇到兼容性问题。很多情况下Firefox完美解析，而IE表地很垃圾,但似乎也有例外的时候。
当使用height属性指定div的高度时，Firefox会固定高度不变，即使内容的高度超出了规定的大小，div的高度不会变化。带来的结果就是文字外溢到div之外，画面混乱。
而同样的代码在IE下表现地却不错，IE在内容高度超出height指出的预期后，将会自动更改高度以适应内容。
解决方案如下：
Firefox提供了一个min-height属性，可以指定div的最小高度，当内容高度超出min-height的值后，Firefox将像IE一样自动调整大小。
可是IE不支持min-height属性，这样Firefox下工作正常的代码在IE下又失效了。
需要一些小小的css hack
!important作用是提高指定样式规则的应用优先权，有!important后缀的规则会在整个大括号的空间中优先被浏览器采用。
而这个标记是不为IE 6所识别的，所以可以利用这个功能，来实现不同浏览器的代码逻辑分支，以实现兼容的目的：
<div style="min-height:240px;height:auto!important;height:240px;">
上面的代码，在Firefox中会优先应用height:auto，而IE 6由于不识别!important，会应用最后面的height：240px。
这个hack有比交大的普适性，一个css内不同字段的分支，都可以用此特性来实现。
–EOF–
reference:
http://www.webmasterworld.com/forum83/6871.htm
最近又遇到一个IE6的bug 🙁
<hr />
<img src="CG_title.jpg" alt="" />
<hr />
这段代码在Firefox下一切正常，可是在IE 6 中却是惨不忍睹。
在Firefox 1.5中：
同样的代码在IE 6中的显示效果：
而且可以发现，无论用各种方法都无法调整hr的上下边距。
为此我在google中搜了好长时间，最后在ms的网站上找到一篇机器翻译的文章，读起来极其恶心，但好在代码还是能看懂的。
解决方法是用经css修饰的div来代替hr标签，代码如下：
div.HrRule {
border: 1px solid #C0C0C0;
background-color: #C0C0C0;
height: 0.5px;
margin-top:0.5px;margin-bottom:2px;
width:100%
}
div.HrRule hr { /* for CSS1 browsers */
display: none;
}
div.HrRule * { /* for CSS2 browsers */
display: none;
}
<div class="HrRule"><hr /></div>
<img src="CG_title.jpg" alt="" width="100%" />
<div class="HrRule"><hr /></div>
修改后的效果：
Firefox 1.5
IE 6
虽然在Firefox中，hack过后的代码中的灰色横条看起来比上面的宽了些，但为了兼容，只能忍受了。
感叹一下，本来好端端的一个<hr />就能搞定的事情，现在却添了这么多代码，效果也不如原来。
但转念一想，现在写前端代码应该还算是比较容易的，毕竟需要中国程序员考虑的也就是IE6和Firefox两个浏览器而已，IE6 bug虽多，但这么多年无数的程序员的积累下，大都已经被找出来了而且基本上都有了解决方案，在可以控制的范畴之内。
真正的炼狱时代，应该是在IE 7、IE 6和Firefox三分天下的时候，苦命的coder不仅要对付古怪的IE 6、注意不知底细的IE 7还要努力与Firefox兼容，呵呵，恐惧中。