Question

我需要设置div的最小高度。在Firefox中，一切都很好，但是我遇到了IE7的问题 - 这是一个意想不到的大空间。

ul, il {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

    .p_block{   
        color: #336699;
        font-size: 14px;
        min-height: 18px;
    }

<ul>
    <li><a href="#"><div class="p_block">text</div></a></li>
    <li><a href="#"><div class="p_block">text</div></a></li>
    <li><a href="#"><div class="p_block">text</div></a></li>
    <li><a href="#"><div class="p_block">text</div></a></li>
</ul>

奇怪的是，如果我从padding: 0px;删除ul, li，一切正常。为什么呢？

Answer 1

@Chinmayee，该解决方案的问题在于firefox和其他几个元素的高度将无法超过18px。

最佳高度的跨浏览器解决方案：

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

基本上;
第1行：大多数现代浏览器都理解！重要，因此不会覆盖下一行中的属性。

第2行：因为旧浏览器不知道！重要，它必须是设定的高度。较旧的浏览器将允许元素增长，除非存在overflow：property set。

第3行：现代浏览器理解min-和！important。所以现代浏览器理解高度：自动和最小高度：200px，而旧版浏览器理解高度：200px;但会让元素增长;）

Answer 2

这是我更喜欢的解决方案：

.p_block{   
        color: #336699;
        font-size: 14px;
        min-height: 18px;
}

然后对IE使用这个：

.p_block{   
        height: 18px;
}

IE将高度视为最小高度，因此它会增长。

您可以通过包含特定的IE6＆amp; 7 CSS文件如下所示（进入＆lt; head＆gt;）

<!--[if IE 6]>
        <link rel="stylesheet" type="text/css" href="css/ie6-hacks.css" />
        <script type="text/javascript">
            // IE6 Background Hover Flicker Fix
            try {
                document.execCommand('BackgroundImageCache',false,true);
                }catch(ignoreme){
            }
        </script>
    <![endif]-->
    <!--[if IE 7]>
        <link rel="stylesheet" type="text/css" href="css/ie7-hacks.css" />
    <![endif]-->

Answer 3

错过auto height和重要内容，并在*之前添加height。

这将仅适用于IE7及以下版本。

.p_block{  
    min-height: 30px; 
    *height: 30px; 
}

这是我使用的，IE7不会使用min-height，但会将height设置为30px，如果需要，它会更大。

Answer 4

将此CSS用于IE＆amp; FF

  .p_block{   
        color: #336699;
        font-size: 14px;
        min-height: 18px;
        height:18px !important;
    }

如何在IE7中设置div的最小高度？

4 个答案: