Firefox的CSS高度100%无法正常工作

Question

我有以下HTML和CSS在Firefox和Chrome中表现完全不同.

JSFiddle.

.container {
  width: 200px;
  height: 50px;
  border: 1px solid black;
  display: inline-table;
}

.content {
  background-color: red;
  width: 30%;
  height: 100%;
}

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

在Chrome中,它可以正确显示,但不能在Firefox中显示

铬:

火狐:

通过检查Firefox中的内容div,高度为0.

为什么它适用于Chrome和Safari,但不适用于Firefox？我注意到删除display: inline-table将工作,但容器div将堆叠而不是内联.

Answer 1

尝试display: inline-table;改为display: inline-block;.

Answer 2

http://jsfiddle.net/yAa3y/12/

我用它时才能让它工作

.content {
    display: inline-table;
 }