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

Question

У меня есть абсолютно позиционированный div, содержащий несколько детей, один из которых относительно позиционирован div. Когда я использую ширину в процентах для дочернего элемента div, он падает до ширины '0' в Internet Explorer 7 , но не в Firefox или Safari.

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

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

Answer 1

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

Answer 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>

Answer 3

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

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

Answer 4

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

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

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

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

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

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

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

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

Answer 5

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

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

Answer 6

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

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