兼容各类浏览器的min-height

关于实现min-height的问题。

 

网上给出了实现方法

{height:auto !important;min-height:20px;height:20px;}

一看有点傻眼的感受，IE6是不支持min-height属性的，有了height:auto !important后，ie6还如何实现min-height?

可是事实胜于雄辩，在一个div的css上写上上面属性，各个浏览器都实现了min-height；对!important语句在ie6下进行测试，用以下代码：

/*html*/
<p class="timp">测试代码</p>
/*css*/
p {color:blue !important}
p.timp {color:green}

上述代码在ie6下文字颜色为蓝色，因为p.timp选择符的优先级比p高，说明!important做用正常。

接着测试下面代码：

/*html*/
<p>测试代码</p>
/*css*/
p.timp {color:blue !important；color:green}

  结果p标签里的元素颜色为绿色。

 结论：在ie6下使用定义语句并用!important定义同一个属性的状况下，!important能够正常使用。而在同一个语句中定义同一个属性，!important不起做用，后定义的优先。

所以{height:auto !important;min-height:20px;height:20px;}这段代码下，ie6的height属性值为20px。

 

既然如此直接将代码改成{height:20px;min_height:20px;}结果发如今标准浏览器下发现文字溢出的状况下，层的高度不会自动增长，缘由在于定义了height的属性（height的默认值为auto，即容器的高度会随着内容的增长而增长），而ie6有一个bug，就是即便定义了height的值，容器高度仍会被内容撑开。

 

知道原理后能够很容易得出实现min-height的有效代码为seletor {min-height:20px; _height:20px;}。