css - 位置 :absolute in FireFox 有点奇怪

Question

我有这样的结构:

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

然后，这是 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;
}

问题是:.board div 应该与 .content div 完全相同。然而，.board div 似乎向下移动了一点，这是 jsFiddle(在 FireFox 中打开它!):http://jsfiddle.net/hxhxhx33/5etU5/

我认为问题出在 .content div 的“position:absolute:..”

如何解决？

Answer 1

这不是 position:absolute;，而是 display: -moz-box; 导致了这个问题。

作为补偿，给.board一个position:inherit;

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