Дочерний элемент в процентах ширины в абсолютно позиционированном родительском элементе в Internet Explorer 7
-
08-06-2019 - |
Вопрос
У меня есть абсолютно определенное положение div
содержащий несколько дочерних элементов, один из которых является относительно расположенным div
.Когда я использую ширина в процентах на ребенке div
, он сворачивается до ширины '0' на Internet Explorer 7, но не в Firefox или Safari.
Если я использую ширина пикселя, это работает.Если родительский элемент расположен относительно друг друга, работает процентная ширина дочернего элемента.
- Есть ли что-то, чего я здесь не понимаю?
- Есть ли простое решение для этого, помимо ширина в пикселях на ребенка?
- Есть ли какая-то область спецификации CSS, которая охватывает это?
Решение
Родитель 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>