css - FireFox 中的内联块重叠边界而不是溢出

Question

我遇到了其他浏览器中没有的 FireFox 渲染问题。我有一个可通过 colResisable 插件调整大小的表格单元格。在我的第二个单元格中，我有两个 div，一个包含一个无序列表，另一个包含一个表格。我不确定这些 div 的内容是否重要。

这两个 div 的样式都是内联块。父级对空白没有换行，以防止第二个内联块落在第一个之下。我的意图是内容会溢出带有滚动条的父 TD。

这在 IE、Safari 和 Chrome 中正常工作，但在 FireFox 中，内容重叠在父级边框的顶部。

这是两个显示差异的屏幕截图：

我有一个近似这种行为的JSFiddle，但我不能完全一样。希望有人会看到这一点并知道发生了什么。

Answer 1

您可以更改display: inline-block为float: left：

#content_1, #content_2 {
    ...
    float: left;
    ...
}

工作示例：http: //jsfiddle.net/xVNae/24/

---

如果您想继续display: inline-block尝试更改border-collapse为inheritfor table：

table {
    border-collapse: inherit;   
}

工作示例：http: //jsfiddle.net/xVNae/25/