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;">
 
 <div style="width: 32% ! important;">
 $
 </div>
 <div style="width: 32% ! important;">
  
 </div>
 </div>
5 ответов

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

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

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


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

.oneThirdColumn {
 min-height: 1em;
}


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

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

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


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


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

licensed under cc by-sa 3.0 with attribution.