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

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

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

  1. есть ли что-то Я здесь скучаю?
  2. есть ли простое решение для этого, кроме -пиксельная ширина на ребенок?
  3. есть ли область спецификации CSS, которая охватывает это?
6 260
html css css3 internet-explorer-7

6 ответов:

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

136

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

IE до 8 имеет временной аспект к своей модели коробки, что наиболее заметно создает проблему с процентной шириной на основе. В вашем случае здесь абсолютно позиционируется div по умолчанию не имеет ширины. Его ширина будет рассчитана на основе ширины пикселя его содержимого и будет рассчитана после отображения содержимого. Таким образом, в точке IE встречает и отображает ваше относительно позиционированное div его родитель имеет ширину 0, поэтому он сам сворачивается до 0.

Если вы хотелось бы более подробно обсудить это вместе с большим количеством рабочих примеров, есть Гусак здесь.

36

почему не процент ширины ребенка в абсолютно позиционированной родительской работе в IE7?

потому что это интернет взрывник

Я что-то упускаю?

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

есть ли простое исправление, кроме пиксельной ширины на ребенке?

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

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

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

33

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

вы пробовали свой код в IE8, чтобы увидеть, если работает там, тоже? IE8 имеет отладчик (F12), а также может работать в режиме IE7.

30

div должен иметь определенную ширину

<div id="parent" style="width:230px;">
    <div id="child1"></div>
    <div id="child2"></div>
</div>
0