html5htmlcssinternet-explorer-7

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

просмотры: 21.4K

У меня есть абсолютно позиционированный объект, div содержащий несколько дочерних элементов, один из которых является относительно позиционированным div . Когда я использую для percentage-based width дочернего элемента div, он сворачивается в 0 width IE7, но не в Firefox или Safari.

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

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

Ответов (7)

Решение

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

Источник

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

Вы пробовали свой код в IE8, чтобы увидеть, работает ли он и там? IE8 имеет Debugger ( 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>
Источник

Вот пример кода. Я думаю, это то, что вы ищете. Следующий код отображается точно так же в 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?

Потому что это Internet Explorer.

Что-то мне здесь не хватает?

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

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

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

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

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

Источник