FireFox 中的渲染问题答案

【问题标题】：Render issue in FireFoxFireFox 中的渲染问题
【发布时间】：2018-08-14 23:09:29
【问题描述】：

我在一个网站上工作，我在 Firefox 中发现了一个我似乎无法修复的错误。每当我用力刷新时，div 都会完美居中（尽管有一个框架会卡住）。但是当我正常刷新时，div完全在左边。

正确的版本：

FF（和 IE）中的版本：

我尝试了多种方法，但找不到错误。有趣的是，在 Internet Explorer 11 中，甚至没有显示 div 元素。

什么会导致这种看似奇怪的行为？

点击here查看该网站的在线版本。

谢谢！

【问题讨论】：

标签： html css internet-explorer firefox

【解决方案1】：

我会说你有比你需要的更多的 CSS。您还应该为banner_text 容器设置宽度和高度，这样您就可以将其居中并将left、right、bottom 和top 设置为0，或者它最初是如何使用flex 完成的。

删除<img src="img/banner.jpg" alt="banner"> 和<div class="banner_overlay"></div>

然后对于您的 CSS，您可以执行以下操作：

.banner {
    width: 100%;
    height: 400px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('http://kookhulpje.nl/img/banner.jpg');
    background-size: cover;
    background-position: center center;
}

.banner::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(72, 25, 48, 0.5);
}

.banner .banner_text {
    background: rgba( 255, 255, 255, 0.6);
    position: absolute;
    z-index: 2;
    border-left: 4px solid #fff;
    border-right: 4px solid #fff;
    width: 470px;
    height: 90px;
}

这解决了主要问题，但我认为您的 javascript 与横幅冲突，由于某种原因，当您放大或缩小横幅的宽度时会挂起，因此其中的所有内容都无法在 Firefox 上正确调整至少。我还没看完。

【讨论】：