div背景图像和iOS Mobile Safari兼容性问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了div背景图像和iOS Mobile Safari兼容性问题相关的知识,希望对你有一定的参考价值。

我有一个带有背景图像的'.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浏览:Correct Mobile background img

导致兼容性问题的原因是什么?我的CSS中哪些部分打破了Mobile Safari的内容?

答案

因为qazxsw poi没有真正起作用。看看qazxsw poi

以上是关于div背景图像和iOS Mobile Safari兼容性问题的主要内容,如果未能解决你的问题,请参考以下文章

背景图像在 Safari 和 iOS 中未显示全宽

JQuery Mobile Scrolling在iOS上不流畅

仅在 Chrome/Safari 中滚动嵌入 Vimeo YouTube 或 Flash 时,浮动视差 DIV 背景图像会跳转

身体上设置的背景图像被切断的问题 - iOS/Safari

背景图像在 Safari 中未正确拉伸

iPad Safari 在将 jpg 渲染为背景图像时遇到问题?