CSS 背景位置在 Mobile Safari (iPhone/iPad) 中不起作用 [英] CSS background-position not working in Mobile Safari (iPhone/iPad)

查看：37
本文介绍了CSS 背景位置在 Mobile Safari (iPhone/iPad) 中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在移动 Safari 中遇到了背景位置问题.它适用于其他桌面浏览器，但不适用于 iPhone 或 iPad.

body {背景色:#000000；背景图片: url('图片/background_top.png');背景重复:不重复；背景位置:居中顶部；溢出:自动；填充:0px；边距:0px；字体系列:Arial"；}#header {宽度:1030px；高度:215px；左边距:自动；右边距:自动；边距顶部:85px；背景图片:url('图片/header.png');}#主要内容{宽度:1000px；高度:自动；左边距:自动；右边距:自动；左边距:15px；padding-right: 15px;填充顶部:15px；填充底部:15px；背景图片:url('images/content_bg.png');背景重复:重复-y；}#页脚{宽度:100%；高度:343px；背景图片: url('图片/background_bottom.png');背景位置:中心；背景重复:不重复；}

background_top.png"和background_bottom.png"都向左偏移了太多.我在谷歌上搜索了一下，据我所知，移动 safari 支持背景位置IS.我还尝试了关键字(top"、center"等)、px 和 % 的所有组合.有什么想法吗?

谢谢！

更新:这是 .html 文件中的标记，它显示了设计 &在其他浏览器中布局很好:(我也更新了上面的css)

<头><title>标题</title><link rel="Stylesheet" type="text/css" href="styles.css"/><身体><div id="header"></div><div id="main-content"></div><div id="页脚"></div>

两张背景图片都非常宽(~2000 像素)，以便在任何尺寸的浏览器上都占据空间.

附言我知道可能有一些更有效的 CSS 快捷方式我可以使用，但现在我喜欢将代码组织起来，就像我有它的可见性一样.

解决方案

iPhone/Webkit 浏览器在放置在 body 标签中时无法居中对齐背景图像.解决此问题的唯一方法是从 body 标签中删除背景图片，并使用额外的 DIV 作为包装器.

#wrapper {背景色:#000000；背景图片: url('图片/background_top.png');背景重复:不重复；背景位置:居中顶部；溢出:自动；}<html lang="zh-cn"><头><title>标题</title><link rel="Stylesheet" type="text/css" href="styles.css"/><身体><div id="包装器"><div id="header"></div><div id="main-content"></div><div id="页脚"></div>

I have an issue with background-position in mobile safari. It works fine on other desktop browsers, but not on iPhone or 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;
}

Both "background_top.png" and "background_bottom.png" are shifted too far to the left. I've googled around, and as far as I can tell, background-position IS supported in mobile safari. I've also tried every combination of keywords ("top", "center", etc.), px, and %. Any thoughts?

Thanks!

Update: here's the markup in the .html file, which displays the design & layout fine in other browsers: (I also updated the above 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>

Both background images are very wide (~2000px) so as to take up space on any sized browser.

P.S. I know that there's probably a few more efficient CSS shortcuts I could be using, but for now I like having the code organized like I have it for visibility.

解决方案

The iPhone/Webkit browser cannot center align background images when placed in the body tag. The only way around this is to remove the background image from your body tag and use an additional DIV as a wrapper.

#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>

这篇关于CSS 背景位置在 Mobile Safari (iPhone/iPad) 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆