css - 将 div 作为表格单元格的 Firefox 问题

Question

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

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

显示:表格单元格

对于带有白色背景的左侧和右侧的 div，并且将带有人字形的 DIV 保持在一个 block 的中间。

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

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