Я экспериментировал с CSS Flexbox , чтобы создать граничные столбцы на моей веб-странице.Использование -moz-box, -moz-box-flex и -moz-box-orient (и эквивалентные атрибуты -webkit).
Все работало нормально, пока я не вставил заголовок HTML5 doctype.Как только я это сделал, внешний div увеличивается в высоту на 16px, а внутренний дочерний div (который содержит стили ящиков) выталкивается вниз.Это оставляет таинственное «поле» наверху дочернего элемента.
Firebug не дает никакой подсказки.Он по-прежнему показывает внутренние и внешние элементы div в одинаковой ширине и высоте (600x600) и показывает 0 для всех значений полей / отступов между двумя элементами div.Но это рендеринг внешнего div в 600x616 и размещение дочернего элемента на 16px ниже вершины.
Я включил простой пример ниже.Внешний div установлен на 600x600.Внутренний div настроен на потребление всего пространства своего родителя, а затем подразделяется на дочерние блоки.
Если вы запустите этот HTML в Firefox, вы увидите «розовое» поле в верхней части квадрата.,(Розовый цвет фона внешнего div).Если вы удалите заголовок DOCTYPE, он будет отображаться очень хорошо.
Я воспроизвел эту проблему как на FF 3.16, так и на FF4 Beta.Нет проблем в Chrome.
Что здесь происходит?Что за причуды учитываются при добавлении заголовка DOCTYPE?
<!DOCTYPE HTML>
<!-- If you remove the DOCTYPE header above,then everything is ok-->
<!-- If you keep the DOCTYPE header above, then "main" gets genenerated at 600x600, but "outer" is generated at about 600x616 -->
<html>
<head>
<title>Flexbox test</title>
<style type="text/css">
.outer
{
width: 600px;
height: 600px;
background-color: #ff00ff;
}
.main
{
width: 100%;
height: 100%;
background-color: #777777;
display: -moz-box;
display: -webkit-box;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
}
.leftpane
{
width: 100px;
background-color: Navy;
}
.rightpane
{
-moz-box-flex: 1;
-webkit-box-flex: 1;
background-color: Olive;
}
</style>
</head>
<body>
<div class="outer">
<div class="main">
<div class="leftpane"></div>
<div class="rightpane"></div>
</div>
</div>
</body>
</html>