Есть ли альтернатива отступам для IE, которая не заставляет текст исчезать?

Question

Есть ли чистая альтернатива, из-за которой текст не исчезает в следующих случаях:

<div style="background-color:#ddd; padding:10px 0 50px 0;">
<ol><li>In what year were you born?</li></ol>
<div><select name="c_record" size="1">
    <option value="">-- Select One --</option>
    <option value="1">1900</option>
    <option value="2">1902</option>
</select></div>
</div>

Если я изменю отступ на внешнем элементе div на: padding:10px 0 0 0;, текст снова появится.

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

Есть идеи?

Редактировать: Я использую IE 6 и 7, и у меня нет другого кода на странице, нет типа документа, таблиц стилей - только код выше.

Answer 1

Добавление позиции: относительная; к вашему стилю исправит эту проблему. Это ласково называется ошибка Пикабу.

Здесь - это ссылка, которая объясняет это более подробно.

Я бы согласился, что вы должны просто попытаться использовать маржу, поскольку добавление позиции: относительное может вызвать другие проблемы. Также браузеры не всегда следуют стандарту блочной модели с отступами.

Answer 2

Я использую IE 6 & 7, и у меня нет другой код на странице, без doctype, таблицы стилей - просто приведенный выше код.

Глупо пытаться решать проблемы, если IE по умолчанию переходит в режим причуд.

В любом случае у @Jeremy B есть хорошее решение с высотой: 1%. Это прекрасно работает для меня в IE6:

<div style="background-color:#ddd; padding:10px 0 50px 0; height: 1%;">

Answer 3

Это единственные стили? Если есть что-то плавающее, вещи быстро усложняются. Пожалуйста, попробуйте сделать это в своем собственном файле, указав только doctype, html, head и т. Д. Нет ничего плохого в вышеприведенном, изолированном.

Answer 4

Попробуйте поле вместо отступа?