Question

我的网站页脚出现问题：http://ow.ly/rko2w

正如您在iPhone上看到的（在Safari中）页脚图像无法正确显示并跨越网站的宽度。

这是页脚的代码：

<div class="footer">
<div style="width:1100px;height:118px;margin:auto;">
    <div id="mc_embed_signup">  
        <form action="http://SaveWithPride.us7.list-manage.com/subscribe/post?u=0beccc5a2d913b0527a748edc&amp;id=cb6e398bc5" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
            <input type="email" value="" name="EMAIL" class="email footer-field" id="mce-EMAIL" placeholder="enter your text" onfocus="this.placeholder = ''" onblur="this.placeholder = 'enter your text'" required>
            <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button footer-submit"></div>
        </form>
    </div>
    <div style="width:334px;height:118px;float:right;background:transparent;"><div class="socialtext">save with pride, socially:</div><div class="twitter"></div><div class="facebook"></div><div class="footertext">© 2013 SaveWithPride.com&nbsp&nbspAll Rights Reserved.&nbsp&nbsp<a href="adamdworak.com">Design by A/D</a></div></div>
</div>

和css：

.footer {
    width:100%;
    height:118px;
    background: #000000 url(../images/footer.png) top center !important;
    margin:70px auto 0 auto;
}

有谁知道我在这里做错了什么？页脚背景（现在看起来）不会伸展到iphone上broswer的边缘，看起来像是没有居中。我试图让它居中，并且在我的计算机上显示100％的宽度。

Answer 1

因此页脚元素背景不如屏幕宽？尝试添加：

.footer {
    background-size: 100% 100%; /* stretches background */
}

Answer 2

尝试从.footer css

中删除宽度

此外，如果您希望在iPhone屏幕中放置页面，请将.footer子div的宽度更改为940px，如下所示

<div class="footer">
   <div style="width:940px;height:118px;margin:auto;">

我说更改宽度是因为.footer设置为100％宽度，这相当于iphone屏幕宽度，因此图像将仅拉伸到屏幕宽度。问题是子div的宽度可能大于iPhone屏幕宽度，这将要求用户进一步向右滚动，这是图像未被拉伸的原因。

iPhone Div背景图像居中？

2 个答案: