像素盒子

使用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