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

Question

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

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

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

Answer 1

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

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's' и '%' были предназначены только для размеров шрифта в 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>

Answer 7

Родитель <div>Для тега не указана ширина. Используйте это для ребенка <div> теги, это может быть процент или пиксель, но каким бы он ни был, он должен ссылаться на соответствующие позиции:

<div id="MainDiv" style="width:60%;">
    <div id="Div1">
        ...
    </div>
    <div id="Div2">
        ...
    </div>
    ...
</div>