CSS调试帮助 - 空div崩溃

Question

以下HTML来自aspx页面.这是关于第一个子DIV元素.在IE7中,即使DIV元素为空,HTML也会呈现出我想象的效果.它应该是它的父级宽度的大约1/3,但在FireFox中它会折叠到零宽度.所有3个div都向左浮动.无论如何,我的问题是如何在FireFox中至少保持空DIV的宽度为32%,最好是Safari,Opera和Chrome.我希望修复程序能够解决所有浏览器中的问题.毫无疑问,原因是我缺乏CSS知识加上可能不正确的IE7渲染.它可能表现正常.任何人都可以帮我纠正这个问题吗？

   <div style="padding-left: 4px ! important; overflow: auto; width: 96% ! important;"  class="fullwidthdiv">

           <div style="width: 32% ! important;" class="oneThirdColumn"></div>

            <div style="width: 32% ! important;" class="oneThirdColumn">
             $<input type="text" style="width: 70px;" class="underlinedTextBox updateReserveAmount" tabindex="123" id="ctl00_DefaultContent_payment1_paymentfrmView_updateReserveAmount" maxlength="11" name="ctl00$DefaultContent$payment1$paymentfrmView$updateReserveAmount">
            </div>
            <div style="width: 32% ! important;" class="oneThirdColumn">
            <input type="submit" style="width: 120px;" class="updateReserve" tabindex="124" id="ctl00_DefaultContent_payment1_paymentfrmView_btnReserve" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$DefaultContent$payment1$paymentfrmView$btnReserve&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" value="Update Reserve" name="ctl00$DefaultContent$payment1$paymentfrmView$btnReserve">  
            </div>
   </div>

Answer 1

这不是问题的宽度,而是高度.

如果div中没有​​任何内容,则高度变为零.但是,IE中存在一个众所周知的错误,它使所有元素的内容至少有一个字符高.

您可以指定div的高度,或者 当您没有任何其他东西放在那里时可以放入它.

Answer 2

我知道这有点旧,但我做的是添加这样的最小高度样式:

.oneThirdColumn {
    min-height: 1em;
}

Answer 3

我<span>在FireFox中遇到了类似的问题(至少47.0.2和50).

修复了以下CSS : span:empty:before {content: '\a0';}.

如果仅为空,那将 在<span>内容之前添加一个,并且不会影响具有一些文本或子元素的元素的布局.