коробка перемещается при использовании гибкой модели коробки

Question

Я пытаюсь создать вложенный макет с моделью гибкого бокса в Firefox.

Мне удалось свести его к простому примеру:

HTML:

<div id="outer">
    <div id="inner">
        <div id="content">
            <div id="scroller"> </div>
        </div>
    </div>
</div>

CSS:

#outer {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

#inner {
    border: 1px solid green;
    display:block;
    width: 100%;
    height: 100%;
    position: absolute;

}

#content {
    display: -moz-box;
    width: 100%;
    height: 100%;
    border: 1px solid red;
}

#scroller {

    \-moz-box-flex: 1;
    display:block;
}

Также я сделал этот маленький jsFiddle: http://jsfiddle.net/dankurka/27GDt/1/

Проблема состоит в том, что div контента визуализируется примерно на 12 пикселей ниже (как вы можете видеть изграницы в jsFiddle).Как я могу это исправить?

Answer 1

Добавить vertical-align: top:

#content {
    display: -moz-box;
    width: 100%;
    height: 100%;
    border: 1px solid red;
    vertical-align: top;
}