IE 和 Firefox 溢出问题/错误？答案

【问题标题】：IE and Firefox Overflow issue/bug?IE 和 Firefox 溢出问题/错误？
【发布时间】：2014-09-17 09:42:20
【问题描述】：

我正在尝试为我正在构建的网站创建一个半响应式标题，但是我遇到了 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 上留下了一个空白区域（边框上方和图像下方）

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

【问题讨论】：

关于我如何改善我的问题的任何问题。请不要在没有解释自己的情况下投反对票。我宁愿改进这个问题。谢谢。
我看到了一些可能我不明白你为什么要采用这种方法的东西，比如将图像定位为绝对值，这是有原因的吗？这是因为覆盖需要包装标题？我尝试在您的 jsfiddle 中修复它，并让它显示红色边框，但我做了浮动元素，所以我不知道这是否适合您，如果可以，我将创建一个新的 jsfiddle

标签： html css internet-explorer firefox

【解决方案1】：

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

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

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

【讨论】：

谢谢。我正在使用 table 将覆盖 div 垂直居中，但我可以将其定位不同。谢谢。

【解决方案2】：

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

【讨论】：

我想把它放在 cmets 部分对不起我不确定答案