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

Question

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

在尝试了各种方法让三个浮动的DIVs 看起来像这样之后，我求助于使用

display:table-cell

对于具有白色背景的左侧和右侧的 div，以及将中间带有人字形的 DIV 保留一个块。

这在 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;
}

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