z-index的問題

發現鉻對我的Galaxy Nexus的一個奇怪的錯誤運行4.1.1（不會發生在舊的Android瀏覽器）z-index的問題

如果您查看下面粘貼Test with viewport meta tag（內容）你會期望#container移到#header上面，因爲它具有更高的z-index，但是它低於它。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Android Bug?</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> 
    <style type="text/css"> 
     html, body { padding: 0; } 
     #header { 
      background: green; 
      width: 100%; 
      height: 230px; 
      top: 0; 
      left: 0; 
      right: 0; 
      position: fixed; 
      z-index: 100; 
     } 
     #container { 
      background: blue; 
      padding: 500px 0; 
      margin-bottom: 1000px; 
      position: relative; 
      z-index: 200; 
      top: 230px; 
      width: 100%; 
     } 
    </style> 
</head> 
<body> 
    <div id="header"></div> 
    <div id="container"></div> 
</body> 
</html>

如果刪除視口元標記，然後它將按預期工作Test without viewport meta tag

有誰知道是否有一個原因，這種情況正在發生或者是它在Chrome/Android的錯誤？

來源

2012-09-10 TheBenCourt

我在Galaxy Nexus 4.1中看不到這種行爲。你能否提供截圖，如果它仍然通過http://new.mcrbug.com再現包括你的設備信息，截圖和細節作爲錯誤 –

這是一個默認的瀏覽器的Android錯誤。它發生在許多設備上（包括我的Maxx 4.0.4），不知道設備的完整列表是什麼。

雖然受到固定位置的影響。雖然這會改變您網站的佈局，但將標題設置爲：absolute;將確保z-index受到尊重。

至少在移動設備上，一些老的iOS設備並不總是尊重固定位置元素，所以這是需要考慮的問題。

來源

2012-09-11 18:10:03 volleybologist

回答

相關問題