Firefox将div作为表格单元格问题

Question

我正在尝试使用Fontawesome V形图在背景图像上创建透明叠加层，如下面的设计组合所示。

在尝试各种各样的事情以使三个浮动的DIV看起来像这样之后，我求助于使用

display:table-cell

对于左边和右边的div，白色背景，并且将DIV与V形中间保持在一个块中。

这在IE和Chrome中运行良好，但Firefox出于某种原因推动了中心的DIV。这是带有透明图像的最终版本中的问题，因为我需要将此DIV保持为160像素宽。 Width和Max-width似乎与display: table-cell无关。

这是jsFiddle。

问题1：如何在FF中完成这项工作？
问题2：是否有更好的方法（没有使用单个图像，圆形切口足够宽以占4K监视器）

Answer 1

为了让它在FF中运行，您只需将vertical-align: top添加到.whitebox元素即可。由于它是table-cell元素，因此它会尊重vertical-align属性并按照您的预期自行调整。

Updated Example

.jumbotaboverlay .whitebox {
    background-color: white;
    border: 1px solid black;
    display: table-cell;
    width: 50%;
    height: 100%;
    vertical-align: top;
}

关于您的其他问题，它完全取决于您尝试支持的浏览器。