2013-10-04 36 views
2

我創建了一個測試網頁展示position:fixed問題上UIWebView和移動Safari瀏覽器:我該如何定位:iOS 7上的固定工作?

<!DOCTYPE html> 
<html style="overflow: hidden; "> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.2, user-scalable=no"> 
    <title>Test</title> 

    <style type="text/css"> 
    * { 
     -webkit-tap-highlight-color: rgba(0,0,0,0); 
    } 
    body { 
     margin: 0px; 
     padding: 0px; 
    } 
    .fullscreen { 
     background: transparent; 
     display: block; 
     position: absolute; 
     top: 0; left: 0; 
     width: 100%; 
     height: 100%; 
    } 
    .screen { 
     position: fixed; 
     left: 0px; 
     top: 0px; 
     width: 100%; 
     height: 100%; 
     /*-webkit-box-shadow: inset 0 0 10px #0d1f2b; 
     -moz-box-shadow: inset 0 0 10px #0d1f2b; 
     -o-box-shadow: inset 0 0 10px #0d1f2b;*/ 
     box-shadow: inset 0 0 10px #0d1f2b; 
    } 
    </style> 
</head> 
<body> 
    <div class="screen" id="screen"></div> 
    <form><textarea id="code" name="code" class="fullscreen" rows="1"> 
1 
2 
3 
4 
5 
6 
7 
8 
9 
0 
1 
2 
3 
4 
5 
6 
7 
8 
9 
0 
1 
2 
3 
4 
5 
6 
7 
8 
9 
0 
1 
2 
3 
4 
5 
6 
7 
8 
9 
0 
1 
2 
3 
4 
5 
6 
7 
8 
9 
0 
1 
2 
3 
4 
5 
6 
7 
8 
9 
0 
1 
2 
3 
4 
5 
6 
7 
8 
9 
0 
1 
2 
3 
4 
5 
6 
7 
8 
9 
0 
1 
2 
3 
4 
5 
6 
7 
8 
9 
0 
    </textarea></form> 
</body> 
</html> 

重現步驟:

  1. 公開賽上移動Safari瀏覽器的演示網頁上的iPad或iPhone。
  2. 點擊textarea以顯示鍵盤。
  3. 向上或向下滾動以查看問題。

插入的陰影應該沿着瀏覽器窗口的邊緣,但它不正確地位於頁面的下方。

enter image description here

我怎樣才能讓position:fixed正常工作?

回答

1

對原始問題沒有回答,但它是一個結果相同的解決方案。改變身體的風格於以下內容:

.body { 
    margin: 0px; 
    padding: 0px; 

    /*-webkit-box-shadow: inset 0 0 10px #0d1f2b; 
    -moz-box-shadow: inset 0 0 10px #0d1f2b; 
    -o-box-shadow: inset 0 0 10px #0d1f2b;*/ 
    box-shadow: inset 0 0 10px #0d1f2b; 

    min-height: 100%; 
} 

screen元素可以被去除。

+0

我覺得'.fullScreen'是textarea:'