我有一个带有背景图像的'.home'div,我希望在所述div中垂直放置。除了使用Mobile Safari浏览iPhone外,它在移动设备上完美运行。
HTML代码:
<div id="home" class="home"> <!-- This div has a background image -->
<div class="overlay sections">
<div class="container text-center">
<div class="row">
<div class="div-menu">
<header class="cd-header">
<div id="cd-logo">
<a href="index.html"><img id="logo-animated" src="assets/images/logos/vera_sing_logo.png" alt="Logo"></a>
</div>
<a class="cd-menu-trigger" href="#main-nav"><span></span></a>
</header>
</div>
</div>
</div>
</div>
</div>
这是CSS:
.home{
background: url(../images/horizontal/home.jpg) no-repeat center top fixed;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
width: 100%;
overflow: hidden;
}
我有一个开放的存储库,所以你可以在这里查看网站(和源代码):https://fieel.github.io/VeraSings/
如果您碰巧使用Mobile Safari打开它,您将只看到图像的左上角,这显然是不正确的。这是正确的,使用我的Android设备使用移动Chrome浏览:
导致兼容性问题的原因是什么?我的CSS中哪些部分打破了Mobile Safari的内容?
因为qazxsw poi没有真正起作用。看看qazxsw poi