display:table内部的table-cell的高度问题。

Question

**html代码：**
<div class="parent">
        <div class="child"></div>
        <div class="child">
            <div class="inner"></div>
        </div>
    </div>
    
**CSS代码**
*{margin:0; padding: 0;}
.parent{display: table; width: 60%; padding: 20px; background-color: #ddd; margin:20px auto;}
.parent>div{display: table-cell; border:1px solid #000; height: 120px; width: 50%; }
.child{background-color: #666;}
.child .inner{background-color: #f60; padding: 30px;}

**运行结果：**

在Chorme中，查看child元素的高度为182px，可是我在css中设置的只有120px，再加上边框，正常的话应该是122px呀，为什么会无缘无故多了60px呢？

如果不在child里面嵌套inner，那么child的高度就会按照css所设置的。如果只有一个child,而且嵌套了inner,child的高度同样也会按照css所设置的。

请问各位大神告诉我，display:table和display:table-cell的使用有什么需要注意的地方，还有造成上面这种情况的原因，万分感谢！！！

Answer 1

这可能是一个display:table-cell的bug
我在chrome中没问题，child的高度就是122px
但是在火狐却有问题

但是div里面有内容的话又正常了

我猜测可能与veitical-align有关系，加上vertical-align:middle后，没有内容的div也能显示正常

这可能是浏览器的兼容性问题导致没有内容的table-cell以间隙填充，就像img也标签有个空白间隙一样。（可以参考张鑫旭的《CSS深入理解vertical-align和line-height的基友关系》中提到的幽灵空白节点）
解决的办法就是给table-cell加上vertical-align的值。

这只是我的初步猜测，希望指正。