iPhone浏览器上的背景不重复
Posted
技术标签:
【中文标题】iPhone浏览器上的背景不重复【英文标题】：Background not repeating on iPhone browser 【发布时间】：2012-09-27 21:16:42 【问题描述】：所以有一点浏览器兼容性问题，但仅限于 iPhone 和 iPad Safari 浏览器:(
网站： http://s433108212.onlinehome.us
我的客户希望标题中的空间背景超出我为标题设置的 1000 像素区域。所以我的解决方案是创建另一个 100% 带有背景的包装器：repeat-x 平铺空间的图像。
它适用于 PC 和 Mac 上的每个浏览器，除了 iPhone 和 iPad，这真的让我感到困惑，因为在下面的屏幕截图中，space_stretch_bg 包装器中的平铺背景图像看起来是 1) 向左推，2) 没有平铺，所以 3) 你会在其上方 1000 像素的固定横幅后面看到白色：/
还有其他人遇到这种情况吗？
CSS：
body
width: 100%; margin: 0 auto;
background-image:url('../img/clouds.jpg');
background-repeat:repeat;
.wrapper_bg
position: absolute;
width: 100%; height: 350px;
background-image:url('../img/bg_tile.gif');
background-repeat:repeat-x;
.space_stretch_bg
position: absolute;
top: 100px; width: 100%; height: 250px;
background-image:url('../img/space_banner_big.jpg');
background-repeat:repeat-x; background-position:center;
.container1000
position: relative;
width: 1000px; top: -100px;
margin:auto;
#content_container
position: absolute;
overflow: hidden;
top: 350px; padding: 20px;
background: #fff
缩短的 html：
<body>
<div class="wrapper_bg">
<div class="space_stretch_bg">
<div class="container1000">
<!-- nav_bar -->
<div id="banner">
<a href="http://s433108212.onlinehome.us/index.php" title="Athena's Web">
<div class="logo">
<h1>Athena's Web</h1>
<h2>Carpe Noctem</h2>
<img src="http://s433108212.onlinehome.us/img/athenas_web_logo_no_text.png" />
</div>
</a>
<div id="social_media">
<!-- social_icons -->
</div><!-- social_media -->
</div><!-- banner -->
<!-- End Header -->
【问题讨论】：
【参考方案1】：首先：这是因为 wrapper_bg 背景变小了。它在 space_stretch_bg 后面。给 wrapper_bg min-width: 1000px 因为你的 content_container 是 1000px。
如果你把浏览器缩小，你也可以在你的电脑浏览器上看到空白。
【讨论】：
这样就解决了！但是现在我的布局在所有浏览器中都被破坏了，设计修复到左侧而不是居中：s433108212.onlinehome.us 我不得不将最小宽度放在 space_stretch_bg 而不是包装器上，因为我需要 100% 的包装器 我在 .space_stretch_bg: min-width: 1000px;宽度：100%；它现在可以在浏览器和 iPhone 上运行 :) thx以上是关于iPhone浏览器上的背景不重复的主要内容，如果未能解决你的问题，请参考以下文章