2

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

在此处输入图像描述

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

display:table-cell

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

这在 IE 和 Chrome 中运行良好，但 FirefoxDIV出于某种原因将中心向下推。这是透明图像的最终版本中的一个问题，因为我需要保持这个DIV160 像素宽。Width并且Max-width似乎不适用于display: table-cell.

这是jsFiddle。

问题 1：我如何才能在 FF 中获得这项工作？
问题 2：有没有更好的方法（没有使用具有足够宽的圆形切口的单个图像来考虑 4K 显示器）

4

1 回答 1

2

为了让它在 FF 中工作，你只需要添加vertical-align: top到.whitebox元素中。由于它是一个table-cell元素，它将尊重该vertical-align属性并按照您的预期对齐自身。

更新示例

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

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

于 2014-05-13T18:41:37.593 回答