我正在为 iPad 应用程序开发 html+css。
为了说明这个问题,我做了一个简单的假人:
<head>
<meta charset="UTF-8" />
<style>
body {
height:100%;
width:100%;
padding:0px;
margin:0px;
background:#333;
}
#container {
width:90%;
margin:0 auto;
background:#ccc;
padding:10px;
}
#footer {
position:fixed;
bottom:0px;
height:100px;
width:100%;
background:red;
text-align:center;
}
</style>
</head>
<body>
<div id="container">Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>
</div>
<div id="footer">
</div>
</body>
尝试使用 iPad / Safari 手机,您会注意到第一次滚动页脚(红色块)。它会向上滚动,直到您停止滚动。在您第二次尝试时,一切正常。
当您重新加载页面时,一切都会再次发生。
我认为这是对固定位置的支持是错误的。
任何想法如何解决这个问题?也许使用 jQuery。