CSS-отладочная помощь - пустой сворачивание div

Следующий HTML-код находится на странице aspx. Это относится к первому дочернему элементу DIV. В IE7 HTML отображается так, как я ожидал бы, даже если этот элемент DIV пуст. Он должен быть приблизительно на 1/3 ширины его родительского, но в FireFox он сворачивается до нулевой ширины. Все 3 divs размещены слева. Как бы то ни было, мой вопрос заключается в том, как сохранить как минимум пустую ширину DIV на 32% в FireFox и, желательно, 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>

Ответ 1

Это не ширина, которая является проблемой, это высота.

Если у вас нет содержимого в div, высота становится равной нулю. Тем не менее, есть известная ошибка в IE, где она делает содержание всех элементов по крайней мере одним символом высоким.

Вы можете указать высоту для div, или вы можете поместить в нее  , когда вам нечего добавить туда.

Ответ 2

Я знаю, что это немного старо, но то, что я сделал, это добавить стиль минимальной высоты:

.oneThirdColumn {
    min-height: 1em;
}

Ответ 3

У меня была аналогичная проблема с <span> в FireFox (не менее 47.0.2 и 50).

Исправлено со следующим CSS: span:empty:before {content: '\a0';}.

Это добавит один   до <span> содержимого , если только пустой, и не повлияет на макет элементов, которые имеют некоторый текст или дочерние элементы.

Ответ 4

Я подозреваю это из-за поплавка. Можете ли вы сделать их display: inline-block вместо их плавания? Но это, вероятно, сделает IE недовольным, вам не нравятся встроенные элементы блока. Возможно, span, которые display: inline-block вместо?

Ответ 5

Я использовал padding-top: (insert number)px or %, чтобы мои пустые элементы не рушились. Кажется, работает нормально.