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

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

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

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

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

Я здесь что-то не хватает?

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

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

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

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

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

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

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

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

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