这个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;}

Answer 2

不知道为什么会这样做，但如果你声明身高：auto是重要的，那么将身高设置为500px将无能为力。