gpt4 book ai didi

ios - 带有标签和固定元素的横向模式下的 iPhone 6 Plus 奇怪错误

转载 作者:可可西里 更新时间:2023-11-01 03:34:56 24 4
gpt4 key购买 nike

我在使用 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>

关于ios - 带有标签和固定元素的横向模式下的 iPhone 6 Plus 奇怪错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35604743/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com