我有以下 HTML:
<body>
<div id="page">
<ul id="images">
<li class="image">
<img src="portrait.jpg"/>
</li>
</ul>
<div id="trailing-content">
<p>line 1</p>
<p>line 2</p>
<p>line 3</p>
<p>line 4</p>
<p>line 5</p>
<p>line 6</p>
<p>line 7</p>
<p>line 8</p>
</div>
</div>
</body>
使用以下 CSS:
body, html{
width:100%;
height:100%;
}
body, div, ul, li{
border:0;
margin:0;
padding:0
}
ul, li{
list-style:none;
}
#page{
width:75%;
height:100%;
margin:0 auto;
}
#images{
position:relative;
width:100%;
height:70%;
overflow:hidden;
}
#images .image{
width:100%;
height:100%;
text-align: center;
}
#images .image img{
max-width:100%;
max-height:100%;
margin:0 auto;
}
这里的预期结果是可见图像在给定时间最多为屏幕高度的 70%。这在主要浏览器的桌面版本(经过测试的 Firefox、Chrome、Safari)中完美运行,正如您在这个codepen中看到的那样。
但是当在移动浏览器中(特别是在运行 iOS6 的 iPhone 4 上的 Safari 和 Chrome Mobile 中)时,图像仍然很大(由overflow:hidden
CSS 中的规则切割)并且没有适当地限制它的大小。
iPhone截图:
这是桌面版本应有的作用:
奇怪的是,这只发生在#images
标签后面的后续内容(在这种情况下#trailing-content
)。这表明图像忽略了它的父尺寸,只尊重实际的 iPhone 屏幕尺寸。
更新
我仍然不知道是什么原因造成的,并且注意到 iOS7 确实可以正常工作。但我不愿意在这里放弃对 iOS6 的支持,所以决定悬赏这个问题。