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 指定一个高度，或者当您没有其他任何东西可以放在那里时，您可以在其中放一个  。