CSS位置问题:在横向模式下在iOS 9 iPhone 6+中修复
Gri*_*rin 6 css ios media-queries iphone-6-plus
在以下条件下,我发现我的固定标题有一个奇怪的问题:
- iphone 6+,横向模式
- safari,至少打开了两个标签
- 我的页面有一个位置:固定标题和一个正文和html的位置:相对,高度:100%
页面加载后和向下滚动时,一切正常,标题就位,Web检查器正确显示:
但是当您向上滚动并向下拉屏幕并释放时,页面仍然可以看到页眉,但实际上它已移动到视口下方的某处(请参阅Web检查器不会突出显示它).
这一事实导致所有标题元素无法访问:您无法打开菜单,单击徽标或联系按钮.
标题在以下情况下恢复正常:
- 向下滚动(但向上滚动时再次中断)
- 切换到另一个选项卡并返回
- 或关闭其他标签
我尝试更改标题和正文的DOM或/和CSS,但没有任何东西将标题恢复到正常状态.
有关它如何修复的任何想法？
我很抱歉成为坏消息的使者，但我不知道你的实际问题是什么，因为你没有发布实际的代码。但是，我猜想，由于您的问题是position:fixed，解决它的最佳方法是停止使用position:fixed，因为它似乎不适合您。以下是仅使用绝对和相对定位同样顺利地模拟它的方法：
<html id="eHTML">
<style>
#eHTML { position: static }
#eBODY { position: relative; overflow:hidden }
#eHTML, #eBODY, #main { width: 100%; height: 100%; margin: 0; top: 0 }
#eBODY>div { position:absolute; left:0;bottom:0 }
#footer {height: 20%;background-color:#88f;width:calc(100% - 14px)/*to account in for 14px scrollbar*/;overflow:hidden}
#main {background-color:#ff8;width:100%;height:100%;overflow:auto}
</style>
<body id=eBODY>
<div id=main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
<p>totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,</p>
<p>sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>
<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,</p>
<p>vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<br /><br /><br /><br />
</div>
<div id="footer">
Some Random Fixed<br />
Content! Yay, it workz!
</div>
</body>
</html>| 归档时间： |
|
| 查看次数： |
1031 次 |
| 最近记录： |