Процентная ширина дочернего элемента в абсолютно позиционированном родителе в Internet Explorer 7

У меня есть абсолютно позиционированный div содержащий несколько детей, один из которых - относительно позиционированный div. Когда я использую percentage-based width в percentage-based width для дочернего div, она уменьшается до 0 width в IE7, но не в Firefox или Safari.

Если я использую pixel width, это работает. Если родительский элемент относительно расположен, процентная ширина дочернего элемента работает.

  1. Есть что-то, чего я здесь не хватает?
  2. Есть ли простое решение для этого, кроме pixel-based width в pixel-based width на дочернем элементе?
  3. Есть ли область спецификации CSS, которая покрывает это?

Ответы

Ответ 1

Родительский div должен иметь определенный width, либо в пикселях, либо в процентах. В Internet Explorer 7 родительскому элементу div требуется определенная width для дочернего процента div для правильной работы.

Ответ 2

Вот пример кода. Я думаю, что это то, что вы ищете. Следующее отображается точно так же в Firefox 3 (Mac) и IE7.

#absdiv {
  position: absolute; 
  left: 100px; 
  top: 100px; 
  width: 80%; 
  height: 60%; 
  background: #999;
}

#pctchild {
  width: 60%; 
  height: 40%; 
  background: #CCC;
}

#reldiv {
  position: relative;
  left: 20px;
  top: 20px;
  height: 25px;
  width: 40%;
  background: red;
}
<div id="absdiv">
    <div id="reldiv"></div>
    <div id="pctchild"></div>
</div>

Ответ 3

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

Если вы хотите более подробно обсудить это вместе с множеством рабочих примеров, введите gander здесь.

Ответ 4

Почему процентная ширина дочернего элемента в абсолютно позиционированном родительском элементе не работает в IE7?

Потому что это Internet Explorer

Есть что-то, чего я здесь не хватает?

То есть, чтобы повысить осведомленность ваших коллег/клиентов о том, что IE отстой.

Есть ли простое исправление помимо ширины в пикселях для дочернего элемента?

Используйте единицы em как они более полезны при создании жидких макетов, поскольку вы можете использовать их для отступов и полей, а также для размеров шрифта. Таким образом, ваше пустое пространство увеличивается и сужается пропорционально вашему тексту, если его размер изменен (это действительно то, что вам нужно). Я не думаю, что проценты дают лучший контроль, чем EMS; нет ничего, что могло бы вас остановить, указав в сотых долях ems (0,01 em), и браузер будет интерпретировать их так, как считает нужным.

Есть ли область спецификации CSS, которая покрывает это?

Нет, насколько я помню, em и% были предназначены только для размеров шрифта в CSS 1.0.

Ответ 5

Я думаю, что это имеет какое-то отношение к тому, как свойство hasLayout реализовано в более старом браузере.

Вы пробовали свой код в IE8, чтобы увидеть, работает ли там тоже? IE8 имеет отладчик (F12), а также может работать в режиме IE7.

Ответ 6

У div должна быть определенная ширина:

<div id="parent" style="width:230px;">
    <div id="child1"></div>
    <div id="child2"></div>
</div>