我在移动Safari中有一个背景位置的问题。它在其他桌面浏览器上工作正常,但不能在iPhone或iPad上运行。
- body {
- background-color: #000000;
- background-image: url('images/background_top.png');
- background-repeat: no-repeat;
- background-position: center top;
- overflow: auto;
- padding: 0px;
- margin: 0px;
- font-family: "Arial";
- }
- #header {
- width: 1030px;
- height: 215px;
- margin-left: auto;
- margin-right: auto;
- margin-top: 85px;
- background-image: url('images/header.png');
- }
- #main-content {
- width: 1000px;
- height: auto;
- margin-left: auto;
- margin-right: auto;
- padding-left: 15px;
- padding-right: 15px;
- padding-top: 15px;
- padding-bottom: 15px;
- background-image: url('images/content_bg.png');
- background-repeat: repeat-y;
- }
- #footer {
- width: 100%;
- height: 343px;
- background-image: url('images/background_bottom.png');
- background-position: center;
- background-repeat: no-repeat;
- }
“background_top.png”和“background_bottom.png”都向左移动太远。我已经google了,据我所知,在移动Safari中支持背景位置IS。我也尝试过各种关键字(“顶”,“中心”等),px和%的组合。有什么想法吗?
谢谢!
更新:这是.html文件中的标记,显示设计&布局在其他浏览器中好((我也更新了上面的css)
- <html lang="en">
- <head>
- <title>Title</title>
- <link rel="Stylesheet" type="text/css" href="styles.css" />
- </head>
- <body>
- <div id="header"></div>
- <div id="main-content"></div>
- <div id="footer"></div>
- </body>
- </html>
两个背景图像都非常宽(〜2000像素),以便在任何尺寸的浏览器上占用空间。
附:我知道可能有一些更有效的CSS快捷方式可以使用,但是现在我喜欢将代码组织起来,就像我有可见性一样。
解决方法
当放置在正文标签中时,iPhone / Webkit浏览器不能将背景图像对齐。唯一的办法是从身体标签中删除背景图片,并使用额外的DIV作为包装器。
- #wrapper {
- background-color: #000000;
- background-image: url('images/background_top.png');
- background-repeat: no-repeat;
- background-position: center top;
- overflow: auto;
- }
- <html lang="en">
- <head>
- <title>Title</title>
- <link rel="Stylesheet" type="text/css" href="styles.css" />
- </head>
- <body>
- <div id="wrapper">
- <div id="header"></div>
- <div id="main-content"></div>
- <div id="footer"></div>
- </div>
- </body>
- </html>