Question

我添加了一个页脚背景图片。它在我的电脑上看起来很完美。但它在iPad浏览器上显示不正确。我试着上传图片给你看，但是我在stackoverflow上很新，所以我无法上传。如果有人知道如何向你展示一个图像。请让我知道我会上传它。请看右下角的黑色部分。任何人都可以帮我解决这个问题

谢谢

我将此行添加到我的CSS中。

.footer{ border-top: 4px solid #00b0bd; }
.footer a{ color: #000000;}
.footer-container { width:100%; text-align: left; background: url("../images/footer/footer_damask.gif") repeat scroll 0 0 #333333;}
.footer { margin: 0 auto 15px; width: 960px; }
.aditional-footer { margin:0 auto 0; padding: 30px 0 30px; width: 960px; background-image:none !important;}
.footer .links li { text-transform: none; }
.footer-container a { color:#666669; font-size: 11px; width: 960px; }
.footer-container .footer-right { width: 250px; }
.footer .f-right { width:429px; text-align: right; padding-right:20px; }

这是我的完整CSS。

/* Footer ================================================================================ */
.footer-social-container { width:100%; background: none repeat scroll 0 0 #404040; border-top: 0 solid #00aebb;}
.footer-social { width:960px; padding: 5px 0; margin:0 auto; }
.footer-social .phone { color:#111; float:right; font-size:16px; }
.footer-social .follow_us { display: inline-block; font-size: 16px; margin: 0; float: left; color:#ffffff; }
.footer-social .twitter,
.footer-social .rss,
.footer-social .facebook { margin-left: 5px; text-indent: -9999px; display: inline-block; float: left; background-repeat: no-repeat; background-position: top center; height:24px; width:30px; }
.footer-social .twitter:hover,
.footer-social .rss:hover,
.footer-social .facebook:hover { background-position: bottom center; }
.footer-social .twitter { background-image: url(../images/twitter.png); }
.footer-social .rss { background-image: url(../images/rss.png); }
.footer-social .facebook { background-image: url(../images/facebook.png); }
.footer-social  .gift_img { float: left; border-left: 1px solid #00afbc; border-right: 1px solid #00afbc; padding: 0 50px; margin: 0 0 0 100px; } 

.footer{ border-top: 4px solid #00b0bd; }
.footer a{ color: #000000;}

.footer-container { width:100%; text-align: left; background: url("../images/footer/footer_damask.gif") repeat scroll 0 0 #333333;}

.footer { margin: 0 auto 15px; width: 960px; }
.aditional-footer { margin:0 auto 0; padding: 30px 0 30px; width: 960px; background-image:none !important;}
.footer .links li { text-transform: none; }
.footer-container a { color:#666669; font-size: 11px; width: 960px; }
.footer-container .footer-right { width: 250px; }

.footer .f-right { width:429px; text-align: right; padding-right:20px; }

.footer ul { display:inline; }
.footer li { display:inline; background:url(../images/bkg_pipe1.gif) 100% 50% no-repeat; padding:0 5px 0 0; margin:0 3px 0 0; }
.footer .links li.last { background:none !important; padding-right:0 !important; }
.footer .bugs { margin:0; color:#666; }
.footer .bugs a { font-weight:bold; color:#353535; }
.footer address { color:#666; }
.footer address a { color:#353535; }

.policy li { margin-left:2px; padding-left:10px ; line-height: 1.5; background: url(../images/footer_li.png) no-repeat left top;}
.policy li:hover { background: url(../images/footer_li.png) no-repeat left bottom;}

.footer-container .form-subscribe { }
.footer-container .form-subscribe label { padding-top:2px; font-weight:bold; color:#555; }
.footer-container .form-subscribe .input-box { border: 1px solid #EFEFEF; width: auto; float: left; height: 27px;}
.footer-container .form-subscribe button.button { float:left; width: 58px;}
.footer-container .form-subscribe button.button span { height: 22px; font: normal 11px/22px Tahoma, Verdana, Arial, sans-serif; }
.footer-container .form-subscribe input.input-text { width: 180px; border: 0px solid #d6d4d4; border-right:0; padding: 0; padding-left: 8px; float:left; height: 27px; line-height: 27px; }
.footer-container .form-subscribe input.input-text:focus { border: 1px solid #FF292C; border-right: 0; height: 25px; line-height: 15px }
.footer-container .form-subscribe input.input-text.validation-failed { background: none!important; border-right:0!important; }
.footer-container .form-subscribe .validation-advice { position: absolute; width: 171px; margin-top: 31px; background: white; padding:5px; }

.footer-container .footer-callout { display:block; margin:-10px 0 10px; position:relative; }
.footer-container .store-switcher { color:#555; text-align:right; }
.footer-container .store-switcher label { font-weight:bold; vertical-align:middle; }
.footer-container .store-switcher select { padding:0; vertical-align:middle; }

.footer-container .bottom-container { margin:0 0 8px; text-align:right; }
/* ======================================================================================= */

Answer 1

不是iPad特定的问题，而是低水平分辨率问题。当我的窗户狭窄时，我在Chrome中遇到了同样的错误。

为什么？

.page 960px宽body，100%溢出body（iPad上为768像素）

您的页脚宽度为100％，因此宽度与{{1}}，768px相同。

iPad浏览器上的CSS页脚背景没有完整

1 个答案: