Елемент дочірньої ширини в абсолютно розміщеному батьківському середовищі в Internet Explorer 7

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

Якщо я використовую pixel width, це працює. Якщо батько розташований відносно, відсоткова ширина на дитині працює.

1. Щось тут мені не вистачає?
2. Чи є легке виправлення цього питання, крім pixel-based widthдитини?
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?

Тому що це Internet Explorer

Щось тут мені не вистачає?

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

Чи є легке виправлення, крім ширини на основі пікселів для дитини?

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

Чи є область специфікації CSS, яка охоплює це?

Жодна, наскільки я пам’ятаю, em'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>