在iPhone X上,从纵向旋转到横向后,页面顶部的链接变得无法点击的问题。在纵向模式下,点击 "隐藏工具栏",然后旋转到横向。使用以下代码,我似乎无法点击 "关闭 "按钮。难道屏幕顶部是为地址栏预留的不可点击区域?
JSFiddle与代码。https:/jsfiddle.netk673b48n1
我的代码中是不是遗漏了什么?这是不是某种错误?
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<style>
.header { position: absolute; right: 5px; }
.alert-me:before { content: "Close"; position: absolute; top: 2px; left: -47px; }
.container{ position: absolute; top: 50px; }
</style>
<div class="header">
<a href="#" onclick="alert('Ahhh General Kenobi')">
<div class="alert-me">X</div>
</a>
</div>
<div class="container">
Some lorem ipsum to make the page longer..
</div>
这似乎工作正常。
页面顶部的 "关闭 "现在没有反应了。
我已经测试了这个问题 iPhone 8 和 Xs,Safari浏览器。做的正是你所描述的。在纵向模式下,我点击了 "隐藏工具栏",然后旋转到横向。
iPhone 8.第一次和你描述的一模一样,不过当我回到纵向模式时--警告。第一次和你描述的一模一样,虽然当我回到纵向模式时 - 警报也没有工作。但是!在重新加载页面后--我无法重复这个问题。一切都开始正常工作。在隐藏工具栏和改变方向后--我点击了 关闭,出现完整的工具栏,警报工作正常。我已经尝试了不同的组合,重新加载页面,应用程序,重新打开标签 - 工作正常。
iPhone Xs。 和你描述的一模一样 每次我重载页面时,这个问题都会重复出现。有时 关闭 即使我把手机转回纵向模式,按钮也没有反应。有时在点击3-4次后,就会出现应有的提示。
小结
position:absolute
从正常的文档流中删除元素。如果有的话,该元素将相对于最近的被定位的元素定位;否则,它将相对于它的初始容器定位。也许 在Safari上,它不做。所以你可以使用 position:relative
关于 <body>
以确保它是在 <body>
. 而且你也可以使用大量的 z-index
来安排堆叠上下文顶部的标题。
更多信息。
如果你不需要改变文档的正常流程,你可以使用 display:flex; justify-content: flex-end;
而不是 absolute
定位,将X元素放在最右边。
.d-flex {
display:flex;
}
.justify-content-end {
justify-content: flex-end;
}
.align-items-center {
align-items: center;
}
.pr-5px {
padding-right: 5px;
}
<header class="d-flex justify-content-end align-items-center pr-5px">
<a href="#" onclick="alert('Ahhh General Kenobi')">
<div class="alert-me">X</div>
</a>
</header>
<div class="container">
Some lorem ipsum to make the page longer..
</div>