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

Question

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

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

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

Answer 1

Родитель div должен иметь определенный width, либо в пикселях, либо в процентах. В Интернете   Проводник   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

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

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

Answer 4

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

Потому что Интернет Детонатор

Есть ли что-то я здесь отсутствует?

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

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

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

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

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

Answer 5

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

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