html - 英雄形象不适用于 mozilla

Question

我的英雄形象适用于所有浏览器，但不适用于 Mozilla，我不确定为什么会这样，因为我使用的是一些通常适用于我的非常标准的代码。

这是我的完整背景标题图片的 CSS:

  display: table;
  width: 100%;
  min-height: 100vh;
  height:100vh;
  padding: 100px 0;
  text-align: center;
  color: white;
  background: url(../img/intro-bg.jpg) no-repeat bottom center scroll;
  background-color: black;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;

这是现场直播:http://www.conlamochilaalhombro.com

非常感谢!

Answer 1

简单的解决方案

从 .intro 中删除 height: 100%;。

替代方案

» 只是展示另一种居中文本/内容的方式。

去掉 .introp 上的 display: table; 和 .intro-body< 上的 display: table-cell;/。然后居中 .intro-body 像这样:

.introp {
    position: relative;
}
.intro-body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
}