1

我花了一整天的时间来解决移动设备（如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 解决方案。

问题就在于此。

4

0 回答 0