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

голоса
270

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

Если я использую ширину пикселя , она работает. Если родитель позиционирован относительно, процент ширина на ребенке работает.

  1. Есть ли что-то я здесь отсутствует?
  2. Есть ли легко исправить для этого , кроме ширины пикселя на основе на ребенке?
  3. Есть область спецификации CSS, которая покрывает это?
Задан 31/07/2008 в 22:08
источник пользователем
На других языках...                            


5 ответов

голоса
129

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

Ответил 01/08/2008 d 13:22
источник пользователем

голоса
53

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

Ответил 05/08/2008 d 06:54
источник пользователем

голоса
34

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

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

Ответил 04/09/2008 d 10:02
источник пользователем

голоса
30

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

Потому что Интернет Детонатор

Есть ли что-то я здесь отсутствует?

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

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

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

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

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

Ответил 13/05/2009 d 08:47
источник пользователем

голоса
28

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

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

Ответил 22/10/2010 d 17:21
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more