css - 这个 CSS 代码是否正确？

Question

.divTest { 
    min-height: 500px; 
    height: auto !important; 
    height: 500px; 
}

我有以下 CSS 代码，我在 http://www.cleancss.com/ 上测试过它它去掉了 height: 500px。发生这种情况的任何原因？

Answer 1

!important 命令接管任何其他命令...因此您的 height:500px; 行将始终被忽略(这就是优化器删除该行的原因)。

如果您希望您的 div 的高度仅为 500px，那么您的 CSS 应该是:

.divTest {
    height:500px;
}

如果你想让你的 div 有不同的高度，不小于 500px 那么你的 CSS 应该是:

.divTest {
    min-height: 500px;
    /* height:auto; - implied */
}

您不需要此 css 片段的 !important，除非有一些其他规则影响高度并且您需要覆盖它。您不需要指定 height:auto 因为这是 div 的默认样式(当然除非您继承了其他内容；))

如果您使用的是 IE6，则有一个 work around :

.divTest {min-height:500px;}
* html .divTest {height:500px;}