CSS中!important用法的精彩实例

作者:朱峰日期:2011-05-16 15:50:48 点击:376

 

现在有一个这样的要求:上面盒子的最小高度是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还是火狐里都是正常的.
  1.  
  2. <div style=" height:100px;min-height:100px !important; height:auto!important;  width:300px; background:#ccc; border:1px blue solid; font-size:12px;">
  3. <div style="">在内容的高度不够100px时,我最少要占100px,这时在IE6里,min-height:100px !important; height:auto!important; 这两个属性是不起作用的,因为IE6不认识!important这个关键词.</div>
  4. </div>
  5. <div style="height:100px; width:300px; background:#0CF; border:1px blue solid;">在内容的高度不够100px时,我最少要占100px,这时在IE6里,min-height:100px !important; height:auto!important; 这两个属性是不起作用的,因为IE6不认识!important这个关键词.
  6. [b]为了解决这个问题,!important这个关键词就有用了。[/b]</div>
复制代码

上一篇: display:inline-block怎么用,你知道吗?

下一篇: hack书写规范:IE6、IE7、Firefox之间的兼容写法