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

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

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

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

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

Вот пример кода. Я думаю, это то, что вы ищете. Следующее отображается точно так же в 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>

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

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

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

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

Есть ли что-то, что я здесь скучаю?

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

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

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

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

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

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

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

В divдолжен иметь определенную ширину:

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