我有一些疯狂的问题iPhone 6 Safari(主要是iOS 9,虽然iOS 8也有一些小故障),标签模式打开.所有固定元素都以纵向和横向正确定位,但在横向模式下不可见和/或移动,并打开一个或多个标签.即使它们不可见,它们仍然可以点击并与其他内容重叠.旋转设备在一定程度上解决了问题,以及在标签之间切换.将元素位置从固定设置为静态和背面也有帮助.
HTML：
<html>
<head></head>
<body>
<div id="application">
<div class="outer-header">
<div class="inner-header">
<a id="link-test" href="#">Click me!</a>
</div>
</div>
</div>
</body>
</html>
CSS：
body {
background: linen;
}
.outer-header {
position: fixed;
width: 100%;
height: 30px;
top: 0;
left: 0;
background: steelblue;
}
.inner-header {
background: white;
}
应用程序非常大,但我已经成功地在codepen上重现了这个问题：
iPhone 6 Plus position:fixed bug
使用选项卡直接在横向打开它.
解决方法
如果向应用程序元素添加样式将起作用.像这样的东西：
document.querySelector('#link-test')
.addEventListener('click',function(e) {
e.preventDefault();
alert('You did it!');
});
body {
background: linen;
}
#application {
position: relative;
}
.outer-header {
position: fixed;
width: 100%;
height: 30px;
top: 0;
left: 0;
background: steelblue;
}
.inner-header {
background: white;
}
<html>
<head></head>
<body>
<div id="application">
<div class="outer-header">
<div class="inner-header">
<a id="link-test" href="#">Click me!</a>
</div>
</div>
</div>
</body>
</html>
