CSS位置問題：在橫向模式下在iOS 9 iPhone 6+中修復

Question

在以下條件下，我發現我的固定標題有一個奇怪的問題：

iphone 6+，橫向模式
safari，至少打開了兩個標簽
我的頁面有一個位置：固定標題和一個正文和html的位置：相對，高度：100％

頁面加載后和向下滾動時，一切正常，標題就位，Web檢查器正確顯示：

但是當您向上滾動並向下拉屏幕並釋放時，頁面仍然可以看到頁眉，但實際上它已移動到視口下方的某處（請參閱Web檢查器不會突出顯示它）。

這一事實導致所有標題元素無法訪問：您無法打開菜單，單擊徽標或聯系按鈕。

標題在以下情況下恢復正常：

向下滾動（但向上滾動時再次中斷）
切換到另一個選項卡並返回
或關閉其他標簽

我嘗試更改標題和正文的DOM或/和CSS，但沒有任何東西將標題恢復到正常狀態。

有關它如何修復的任何想法？

Answer 1

我很遺憾成為壞消息的使者，但我不知道你的實際問題是什么，因為你沒有發布實際的代碼。 但是，我猜想，因為你的問題是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>

CSS位置問題：在橫向模式下在iOS 9 iPhone 6+中修復

問題描述

1 個解決方案

解決方案1
0 2017-05-24 05:33:04

CSS位置問題：在橫向模式下在iOS 9 iPhone 6+中修復

問題描述

1 個解決方案

解決方案1 0 2017-05-24 05:33:04

解決方案1
0 2017-05-24 05:33:04