Почему уменьшилась ширина дочернего элемента процентной ширины в абсолютно позиционированном родительском элементе Internet Explorer 7?
У меня есть полностью позиционируемый div, содержащий несколько дочерних элементов, один из которых является относительно позиционированным div. Когда я использую percentage-based width для дочернего div, он сворачивается до 0 width в IE7, но не в Firefox или Safari.
Если я использую pixel width, он работает. Если родительский элемент расположен относительно друг друга, процентная ширина дочернего элемента работает.
- Что-то мне здесь не хватает?
- Есть ли какое-нибудь простое решение, кроме
pixel-based widthна ребенке? - Есть ли в спецификации CSS область, которая охватывает это?
Ответы 7
Родительский 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.
Если вы хотите более подробно обсудить это вместе с множеством рабочих примеров, попробуйте здесь.
Why doesn’t the percentage width child in absolutely positioned parent work in IE7?
Потому что это Internet Explorer.
Is there something I'm missing here?
То есть, чтобы повысить осведомленность ваших коллег / клиентов о том, что IE плох.
Is there an easy fix besides the pixel-based width on the child?
Используйте единицы em, поскольку они более полезны при создании жидких макетов, поскольку вы можете использовать их для заполнения и полей, а также для размеров шрифта. Таким образом, ваше пустое пространство увеличивается и уменьшается пропорционально вашему тексту, если его размер изменяется (что действительно вам нужно). Я не думаю, что проценты дают более тонкий контроль, чем em; ничто не мешает вам указать сотые доли ems (0,01 em), и браузер будет интерпретировать их так, как считает нужным.
Is there an area of the CSS specification that covers this?
Нет, насколько я помню, 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>
У родительского тега <div> не указана ширина. Используйте его для дочерних тегов <div>, это может быть процент или пиксель, но каким бы он ни был, он должен ссылаться на соответствующие позиции:
<div id = "MainDiv" style = "width:60%;">
<div id = "Div1">
...
</div>
<div id = "Div2">
...
</div>
...
</div>