我有一些疯狂的问题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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。