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

StackOverflow https://stackoverflow.com/questions/6

Вопрос

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

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

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

Решение

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

Другие советы

Вот несколько примеров кода.Я думаю, это то, что вы ищете.Следующее отображается точно так же в 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>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top