Может ли ребенок влиять на размер своего родителя в режиме стандартов? - PullRequest
Новая
       10

Может ли ребенок влиять на размер своего родителя в режиме стандартов?

1 голос
/ 11 ноября 2009

Возьмем, к примеру, эту страницу, можно ли вставить ребенка в mydiv, чтобы рост mydiv превысил 500px? 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
    <div id="mydiv" style="width:500px;height:500px;border:4px solid red">
        <!-- place content here -->
    </div>
</body>
</html>

Я не могу найти ничего, что будет. Например, в приведенной ниже ситуации я сказал, что innerDiv имеет высоту 100%. Он обнаружит, что его родитель имеет высоту 500px, а значит, и высоту 500px. В результате получается, что содержимое имеет высоту 800px, а содержимое выходит за пределы mydiv, при этом mydiv по-прежнему имеет высоту 500px: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
    <div id="mydiv" style="width:500px;height:500px;border:4px solid red">
        <img src="myimage.jpg" width="400" height="300" />
        <div style="width:100%;height:100%;background:yellow">
            hi
        </div>
    </div>
</body>
</html>

IE, работающий в режиме причуд, заставит mydiv расти, чтобы приспособить своих детей во многих ситуациях. Похоже, режим стандартов явно не будет расти. Это всегда так?

Я тестирую это в основном в IE8 и FF3.5 в Windows, при этом IE8 работает во всех возможных режимах.

1 Ответ

3 голосов
/ 11 ноября 2009

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

Однако существуют методы выращивания контейнера, чтобы он соответствовал размеру его детей. В стандартном режиме правильным способом является установка свойства CSS min-height вместо свойства height.

Поскольку поведение , обеспечивающее высоту *1013*, отсутствует в IE6, люди обычно заканчивают настройкой min-height для совместимых со стандартами браузеров, а затем либо устанавливают height для IE только с условной комментарии или префикс имени свойства с подчеркиванием _, чтобы IE6 использовал его, но другие браузеры его игнорировали.

Так что ваш div будет чем-то вроде 

<div id="mydiv" style="width:500px;min-height:500px;_height:500px;border:4px solid red">

Более подробную информацию о min-height можно найти здесь , а быстрый поиск в Google / Bing для min-height IE6 даст вам все ответы, которые вам нужны.

...