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

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

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

Потому что это интернет взрыватель

Может быть, я чего-то здесь не понимаю?

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

Есть ли простое исправление помимо пиксельной ширины на ребенке?

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

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

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

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

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

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

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