html - IE 和 Firefox 溢出问题/错误？

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

这非常有效，但在 Google Chrome 上留下了一个空白区域(边框上方和图像下方)

是什么原因造成的？我该如何解决它并仍然获得我想要的效果？

Answer 1

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

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

如您所见，我删除了“display: table;”声明，它工作正常。