IE和Firefox Overflow问题/ bug？

Question

我正在尝试为我正在构建的网站创建一个半响应头，但是我遇到了IE和Firefox的溢出问题。然而，Chrome可以完美运行。

我创建了一个JSFIDDLE来证明我的意思。

在chrome中，您应该看到如下内容：

然而，在Firefox和Chrome上的同一个Jsfiddle中，底部没有红色边框，如下所示：

我尝试解决此问题的一种方法是将我的CSS更改为：

.header .header-image {
    position: absolute;
    overflow: hidden;
    top:0;
    bottom:1px;
    left:0;
    right:0;
}

这完美无缺，但在谷歌浏览器上留下了一个空白区域（在边框上方和图像下方）

造成这种情况的原因是什么？我如何解决这个问题仍然可以达到我想要的效果？

Answer 1

为了显示红色边框，只需将.header的标题声明更改为如下：

.header {
    min-width: 1100px;
    position:relative;
    overflow:hidden;
    width: 100%;
    height:350px;
    border-bottom: 1px solid #FF0000;
}

正如您所看到的，我已删除＆＃34; display：table;＆＃34;声明，它工作正常。

Answer 2

我认为这可能与Chrome和Firefox的前缀有关。 前缀的一个例子是： Android：-webkit- Chrome：-webkit- Firefox：-moz- Internet Explorer：-ms- iOS：-webkit- 歌剧：-o- Safari：-webkit -