Следующий 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("ctl00$DefaultContent$payment1$paymentfrmView$btnReserve", "", true, "", "", false, false))" value="Update Reserve" name="ctl00$DefaultContent$payment1$paymentfrmView$btnReserve">
</div>
</div>
Это не ширина, которая является проблемой, это высота.
Если у вас нет содержимого в div, высота становится равной нулю. Тем не менее, есть известная ошибка в IE, где она делает содержание всех элементов по крайней мере одним символом высоким.
Вы можете указать высоту для div, или вы можете поместить в нее , когда вам нечего добавить туда.
Я знаю, что это немного старо, но то, что я сделал, это добавить стиль минимальной высоты:
.oneThirdColumn {
min-height: 1em;
}
У меня была аналогичная проблема с <span> в FireFox (не менее 47.0.2 и 50).
Исправлено со следующим CSS: span:empty:before {content: '\a0';}.
Это добавит один до <span> содержимого , если только пустой, и не повлияет на макет элементов, которые имеют некоторый текст или дочерние элементы.
Я подозреваю это из-за поплавка. Можете ли вы сделать их display: inline-block вместо их плавания? Но это, вероятно, сделает IE недовольным, вам не нравятся встроенные элементы блока. Возможно, span, которые display: inline-block вместо?
Я использовал padding-top: (insert number)px or %, чтобы мои пустые элементы не рушились. Кажется, работает нормально.