在FireFox中渲染问题

Question

我正在网站上工作，我在firefox中发现了一个错误，我似乎无法修复。每当我努力刷新时，div都会完美地居中（虽然有一个框架，它会断断续续）。但是当我正常刷新时，div完全在左边。

正确的版本： https://github.com/gogo/protobuf/issues/218

FF（和IE）中的版本：

我尝试了很多东西，但我找不到这个bug。有趣的是，在Internet Explorer 11中，div元素甚至没有显示出来。

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

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

谢谢！

Answer 1

我会说你的CSS比你需要的多。您还应该为banner_text容器设置宽度和高度，这样您就可以将其左，右，底部和顶部设置为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上正确调整至少。我还没有看完它。