我希望 html 标记中的这个图像只填充 320px 的最大宽度,就像它应该的那样。然而,它还不止于此。水平滚动条出现,图像平铺增加了 166 个像素。在 IOS 模拟器和我的 ipone 中,所有其他元素都正确跨越了宽度。
@media only screen and (max-width : 320px) {
html {
margin:0;
padding:0;
background: url('../_images/iphoneCardboard_flat.png')repeat;
}
更新:这些是一些可能相关的标签。
#band1 {
position: absolute;
top:0;
left:0;
height:50px;
width:100%;
background-image: url('../_images/iphoneGradient.png');
z-index:-1;
}
.barbLogo {
position: absolute;
top:3px;
margin-left:165px;
width:320px;
}
#band2{
position: absolute;
top:-75px;
left:0;
height:50px;
width:100%;
background-image: url('../_images/iphoneGradient.png');
z-index:-1;
}
#gridBgContainer{
position: absolute;
margin:0;
top:50px;
left:0;
height:200px;
background:url('../_images/gridBg.png');
background-repeat: repeat;
display: table;
z-index: 1;
}
#wrapper {
position: relative;
top:0px;
left:0;
right:0;
margin: 0 auto 0 auto;
width:100%;
text-align: center;
z-index: 3;
}
#socialLinks {
position: absolute;
margin-top: 14px;
float:right;
right:0px;
}
#top-menu {
position: absolute;
top:0px;
left: 0px;
width:320px;
z-index: 100;
}
section#homeContent {
position: absolute;
top: 400px;
width:320px;
z-index: 10;
}
section#faqContent {
position: absolute;
top:900px;
width:320px;
z-index: 10;
text-align:left;
}
footer {
position: absolute;
font-size: 1.15em;
top: 1230px;
padding: 0 1% 0 1%;
width: 100%;
height: 75px;
text-align: center;
z-index: 10;
}
.footer{
text-align:center;
padding: 2% 0 0 0;
}
#band3{
position: absolute;
top: 1255px;
left:0;
height:50px;
width:100%;
background-image: url('../_images/iphoneGradient.png')repeat-x;
z-index: -1;
}