我的移动应用程序顶部有一个固定的标题。在iOS7的移动Safari上，在横向模式下，如果我向下滚动，然后单击我的固定标题，状态栏会打开，我无法单击任何标题元素。
我的 html 可以简化为：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
</head>
<body>
<header>
<a href="javascript:alert('clicked')">
Click Me
</a>
</header>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie diam sed rhoncus luctus. Integer et urna erat. Donec venenatis leo eu adipiscing condimentum. Praesent auctor interdum mauris, a cursus nisl. Mauris at nunc in magna gravida molestie. Phasellus mollis ultricies tellus, vel vestibulum dui accumsan quis. Suspendisse in mi odio. Donec ultricies justo id sem eleifend, et interdum turpis accumsan. Vestibulum adipiscing at magna id lobortis. Quisque sed fermentum lacus. Suspendisse dui dui, ultricies ac malesuada at, egestas vel sapien. Donec ac tristique ipsum. Morbi est dolor, commodo ac sem a, eleifend varius justo. In id condimentum lorem. Sed sit amet lorem a nisl adipiscing consectetur eget in orci. Aenean et mauris tempor, sagittis dui nec, consequat turpis.</p>
<p>Maecenas diam erat, tincidunt eu elit sed, ultrices commodo erat. Sed at lectus accumsan, eleifend mi non, gravida eros. Quisque eget odio augue. Donec suscipit nibh sapien, nec ullamcorper est ullamcorper non. Donec congue, risus vitae mattis auctor, justo augue molestie sapien, laoreet pharetra urna lectus vitae libero. Vestibulum vel tellus eget mauris euismod suscipit. Ut eleifend lectus sed ipsum pharetra ornare. Vestibulum lacinia lectus vitae est ultricies hendrerit. Duis vitae facilisis diam.</p>
<p>Etiam ut justo non arcu sodales sagittis. Morbi dictum lorem at quam fermentum sollicitudin. In aliquet eget massa sed condimentum. In et scelerisque leo, sit amet fermentum urna. Quisque sit amet ipsum mi. Cras id tempus tellus. Nullam accumsan adipiscing arcu ut suscipit. Sed non varius augue. Quisque vehicula viverra elit, eget egestas erat vulputate lobortis. Sed ornare facilisis mollis. Aliquam est purus, posuere in faucibus feugiat, pellentesque non leo. Pellentesque viverra pellentesque fringilla.</p>
<p>Quisque commodo velit ac nisi vehicula sodales. Phasellus laoreet nisl nec tellus dapibus, eu accumsan dui interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ornare ipsum eu lacus accumsan consectetur. Suspendisse potenti. Donec convallis elit ac dui fermentum, in consequat ipsum rhoncus. Nunc id sagittis quam. Mauris nec metus ac est sodales malesuada. Duis luctus tortor at tellus suscipit porttitor. Vestibulum vitae facilisis ante. Proin ut nisi quis mi sodales dignissim id nec urna. Suspendisse molestie tortor non arcu convallis feugiat. Etiam ac volutpat nisi, a pharetra neque.</p>
<p>Curabitur luctus, nisl ut hendrerit tempus, enim turpis tristique enim, sit amet auctor sem purus ac risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum tincidunt ante et sollicitudin. Nullam iaculis tortor at eros sodales interdum vitae quis libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec sit amet lacus quam. Nam mollis arcu arcu, at tempor ligula rutrum eget. Praesent sodales libero neque. Vestibulum commodo magna sit amet elit pretium mollis. Sed enim diam, aliquet sed volutpat eu, dictum ut nisl. Phasellus volutpat, nisi sit amet rutrum elementum, turpis nunc fringilla purus, consectetur pretium nunc tortor elementum erat.</p>
</div>
</body>
</html>
还有我的 CSS：
header {
height: 44px;
padding: 4px 7px 0px 7px;
background: lightgrey;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 5;
}
.content {
margin-top: 60px;
position: relative;
z-index: -1;
}
知道吗？
抱歉，但你不能在 iOS7 上做到这一点。点击顶部和底部 30pxs（左右）将触发浏览器镶边（导航栏、底部栏） - 您不能在那里放置固定位置的内容。要么使您的内容不固定，要么留下 30pxs 空间：-/。