分層網頁視圖

我有一個HTML資產，顯示由於在Android的網頁視圖內。目前的瀏覽器顯示效果很好，但Android 2.1等較舊的瀏覽器會顯示您在圖像中看到的內容。

First image of my app Fail 分層網頁視圖

我把代碼放在任何人想看的情況下。
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>Documento sin título</title> 
    <script> 
     function show(divactual,textactual) { 
      if(document.getElementById(divactual).style.display == "block"){ 
       document.getElementById(divactual).style.display = "none"; 
       document.getElementById(textactual).innerHTML = "show details..."; 

       } 
      else if(document.getElementById(divactual).style.display == "none"){ 
       document.getElementById(divactual).style.display = "block"; 
       document.getElementById(textactual).innerHTML = "hidden details..."; 
       } 
     } 
    </script> 
    <style type="text/css"> 
     body{ 
      background-color:transparent; 
      font-family: Verdana, Geneva, sans-serif; 
      font-size: 1.0em; 
      font-style: normal; 
      color:#999999; 
      margin:10px; 
     } 
     body a{ 
      color:#0CF; 
      text-decoration:none; 
     } 
     #bg { 
      z-index: -14; 
      width: 100%; 
     } 
     #letrapequena { 
      font-family: Verdana, Geneva, sans-serif; 
      font-size: 0.6em; 
      color: #00537c; 
     } 
     #tituloseccion{ 
      font-family: Verdana, Geneva, sans-serif; 
      font-size: 1.5em; 
      font-style: normal; 
      font-weight: bold; 
      color:#7AB800; 
     } 
     #headtwo{ 
      font-family: Verdana, Geneva, sans-serif; 
      font-size: 1.2em; 
      font-style: normal; 
      font-weight: bold; 
      color:#7AB800; 
     } 
     #headthree{ 
      font-size: 1.1em; 
      font-style: normal; 
      font-weight:bold; 
      color:#00537C; 
     } 
     #container{ 
      background-color:#D8F7FE; 
      margin:10px 0; 
      color:#00537c; 
      font-weight:bold; 
     } 
    </style> 
    </head> 
    <body style="background-color:transparent;"> 
    <div id="tituloseccion"> 
     Titleone 
    </div> 
    <hr align="left" width="90%" size="0.1em" color="#999999"> 
    <div id="headtwo">titletwo</div> 
    <div id="bigcontainer" style="display:block;"> 
     <div id="headthree">titlethree</div> 
     <div id="generalcont" style="display:block;"> 
      <div id="container" style="display:block;"> 
       <div style="display:inline">parrone&nbsp;&nbsp;&nbsp;</div> 
       <div style="display:inline;"> 
        <a href="javascript:show('info1','text1');" id="text1">show datails...</a> 
       </div> 
      </div> 
      <div id="info1" style="display:none;" > 
       text text text text text text text text 
      </div> 
     </div> 

     <div id="generalcont" style="display:block;"> 
      <div id="container" style="display:block;"> 
       <div style="display:inline">parrtwo&nbsp;&nbsp;&nbsp;&nbsp;</div> 
       <div style="display:inline;"> 
        <a href="javascript:show('info2','text2');" id="text2">show details...</a> 
       </div> 
      </div> 
      <div id="info2" style="display:none;" > 
       text text text text text text text 
      </div> 
     </div> 
    </div> 
    <div id="letrapequena" style="display:block;"> 
       text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
      </div> 
    </body> 
</html>

JAVA

package es.ibys.prueba.webview; 

import android.app.Activity; 
import android.graphics.Color; 
import android.os.Bundle; 
import android.webkit.WebView; 

public class PruebawebviewActivity extends Activity { 
    /** Called when the activity is first created. */ 
    @Override 
    public void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.main); 

     WebView myWview = (WebView) findViewById(R.id.webview); 

     String miurl = "file:///android_asset/index2.htm"; 
     myWview.getSettings().setJavaScriptEnabled(true); 
     myWview.setBackgroundColor(Color.TRANSPARENT); 
     myWview.loadUrl(miurl); 
    } 
}

我不知道如何解決它。我嘗試過改變圖層，CSS，div，樣式......所有發生在我身上的事情。有人發生過嗎？你是如何管理的？請幫助

來源

2012-06-12 lûr

那如何出現的錯誤得到顯示在屏幕上的文字？你想要做什麼？你能否澄清一點。 – Charlie

嗨。當其中一個文本展開時，下面的文本將保留在您所在的屏幕上，並且文本在其上滾動。這段文字應該顯示在文字不會落後的地方。我希望我已經解釋;-) –

所以基本上它們重疊？ – Charlie

你確定這是不是你的JS有問題？

這裏是你的代碼提琴它：http://jsfiddle.net/8wsvu/

是純JS的show()功能在Android的功能，或者它應該是JS？我還沒有在JS中知道它是否足夠偉大，但是使用Googling它沒有成爲JS功能的結果。

我的第二個猜測，爲什麼它的分層錯誤是因爲div的被絕對定位在彼此的頂部。

如果你可以使用jQuery的顯示和隱藏頁面上的元素，這將是一個簡單得多。

來源

2012-06-18 14:06:26 Charlie

我試過用jquery和簡單的div，也就是在div內沒有其他。仍然在Android 2.1及更低版本的終端上。謝謝 –

嗨，夥計們。有人知道如果我通過HTML5更改HTML，這個問題已解決？謝謝 –

我的回答對你有幫助嗎？如果是這樣，請立即行動起來，或接受它。 – Charlie

分層網頁視圖

回答

相關問題