Question

我花了一整天的时间来解决移动设备出现的问题，例如 iPhone ， iPad 和 Acer平板电脑 。我无法检查其他设备，但在移动设备方面，这个问题似乎非常普遍。

以下是我使用的前三个css元素：

* {
    margin: 0;
    padding: 0;
}

html, body {
    background: #f1f1f1;
    margin: 0;
    padding: 0;
}

#page-wrap {
    background: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

这里的要点是我有一堆1200像素宽的<div>元素，其内容放在其他浏览器范围的元素中。所以，首先，我使用css让我的网站使用所有浏览器窗口，然后像这样添加<div>元素并将它们居中：

#featured {
    background: #282828;
    width: 100%;
    height: auto;
    padding: 0;
    }
    #featured #inside {
        background: #282828 repeat;
        width: 1200px;
        height: auto;
        margin: 0 auto;
        padding: 50px 0 50px 0;
    }

以下是问题：

我目前正在使用此代码为<div>元素定义固定位置背景图片：

#banner_index {
    background: url(../images/banner/index.jpg) no-repeat center center fixed;
    -webkit-background-size: 2000px 1333px;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    height: 600px;
    margin: 0 auto;
    padding: 0;
}

虽然这使得背景在所有必需的桌面浏览器上看起来都很完美，但所有前面提到的移动设备（无论使用何种浏览器应用程序）都会显示较小的背景图像，即。没有完全展开以填充<div>元素。

对于我的消亡，我为<div>元素上方的网站创建了一个标题#banner_index，其上边框为3像素。以下是该代码的代码：

#header {
    background: #f1f1f1;
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 20px 0 20px 0;
    border-top: solid #282828 3px;
}

令我惊讶的是，这个边框，实际上整个<div>似乎被切成与其正下方#banner_index元素上的背景图像相同的宽度。

我意识到移动设备在fixed元素中的background:代码存在问题，但我设法找到的所有变通办法似乎没用。特别是当border-top:元素与背景图像无关时。

有人愿意帮助沮丧的爱好者吗？

我想保持我的网站没有Javascript，并认为可能有更简单的css解决方案。

其中有瑕疵。

背景图像和边框顶部元素无法在移动设备上正确显示

0 个答案: