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

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

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

  1. Есть ли что-то, что я пропускаю здесь?
  2. Есть ли легкая фиксация для этого, кроме того, pixel-based width на ребенке?
  3. Существует ли область спецификации CSS, которая покрывает это?
290
задан buræquete 18 July 2019 в 15:43
поделиться

4 ответа

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

146
ответ дан Peter Mortensen 23 November 2019 в 01:43
поделиться

Вот некоторый пример кода. Я думаю, что это - то, что Вы ищете. Следующие дисплеи точно то же в (Mac) Firefox 3 и 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>
59
ответ дан buschtoens 23 November 2019 в 01:43
поделиться

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

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

37
ответ дан Paul Fleming 23 November 2019 в 01:43
поделиться

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

Because it's Internet Explorer

Is there something I'm missing here?

That is, to raise your co-worker's / clients' awareness that IE sucks.

Is there an easy fix besides the pixel-based width on the child?

Use em units as they are more useful when creating liquid layouts as you can use them for padding and margins as well as font sizes. So your white space grows and shrinks proportionally to your text if it is resized (which is really what you need). I don't think percentages give a finer control than ems; there's nothing to stop you specifying in hundredths of ems (0.01 em) and the browser will interpret as it sees fit.

Is there an area of the CSS specification that covers this?

None, as far as I remember em's and %'s were intended for font sizes alone back at CSS 1.0.

34
ответ дан 23 November 2019 в 01:43
поделиться
Другие вопросы по тегам:

Похожие вопросы: