CSS中!important用法的精彩实例

作者：朱峰

2011-05-16 15:50:48

392

现在有一个这样的要求：上面盒子的最小高度是100px,如果里面的内容超过了100px，则自动适应内容的高度。
实现这个要求在FF和IE8里是很简单的，用CSS属性的min-height:100pxt; height:auto就可以了，但是在IE6里是不行的，IE6不支持min-height这个属性。但IE6有个BUG，就是如果指定了一个盒子的高度，但里面内容又溢出了，那这个高度则会失去作用，高度会随着内容的增长而自动增长，这和min-height:100pxt; height:auto的效果是一样的。但在IE6以上的版本和火狐里，height这个属性没有这个BUG，如果在高度的方向内容溢出，它下面的弟弟元素会和上面的内容交叠在一起。<br />
为了解决这个问题，!important这个关键词就有用了。
做好这个小示例，需要充分理解height这个属性的实质和这个属性在不同浏览器里的差异
看下面两段代码,并且把下面的代码COPY到网页中执行看效果,无论在IE6还是火狐里都是正常的.

<div style=" height:100px;min-height:100px !important; height:auto!important; width:300px; background:#ccc; border:1px blue solid; font-size:12px;">
<div style="">在内容的高度不够100px时，我最少要占100px,这时在IE6里，min-height:100px !important; height:auto!important; 这两个属性是不起作用的，因为IE6不认识!important这个关键词.</div>
</div>
<div style="height:100px; width:300px; background:#0CF; border:1px blue solid;">在内容的高度不够100px时，我最少要占100px,这时在IE6里，min-height:100px !important; height:auto!important; 这两个属性是不起作用的，因为IE6不认识!important这个关键词.
[b]为了解决这个问题，!important这个关键词就有用了。[/b]</div>

复制代码

display:inline-block怎么用，你知道吗？

hack书写规范：IE6、IE7、Firefox之间的兼容写法