Question

I have a structure like this:

<div class="content">
    <div class="board"></div>
</div>

then, here is the CSS:

.content{
    height: 155px;
    left: 0;
    top: 30px;
    width: 300px;
    position:absolute;
    background-color:black;
}

.board{
    -moz-box-align: stretch;
    -moz-box-orient: horizontal;
    -moz-box-pack: center;
    display: -moz-box;
    height: 100%;
    width: 100%;
    background-color:red;
}

the problem is: the .board div should be exactly the same as the .content div. However, the .board div appears to move downwards a bit, Here is the jsFiddle(open it in FireFox!): http://jsfiddle.net/hxhxhx33/5etU5/

I think the problem is at the “position:absolute: of the .content div..

How to fix it?

Answer 1

It’s not the position:absolute;, it’s the display: -moz-box; causing the issue.

To compensate, give .board a position:inherit;

http://jsfiddle.net/5etU5/1/