расслоение внутри HTML внутри webview

У меня есть html-активы, которые показывают благодаря веб-просмотру в android. С текущими браузерами отображается хорошо, но с более старыми браузерами, такими как Android 2.1, идет то, что вы видите на изображениях.

First image of my app Fail расслоение внутри HTML внутри webview

Я поставил код в случае, если кто-то хочет видеть.
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, styles ... все, что произошло со мной. Кто-нибудь случилось? Как вам удалось? Пожалуйста, помогите

источник

2012-06-12 lûr

Каким образом текст, который появляется неправильно, отображается на экране? И что вы пытаетесь заставить его сделать? Не могли бы вы немного разъяснить. – Charlie

Привет. Когда один из текстов разворачивается, ниже, останется на экране, где вы были, и текст прокручивается над ними. Этот текст должен отображаться ниже текста, который не отстает. Надеюсь, я объяснил ;-) –

Так в основном они перекрываются? – Charlie

Вы уверены, что это не проблема с вашим JS?

Вот скрипка с вашим кодом в нем: http://jsfiddle.net/8wsvu/

ли show() функции в чистом JS андроида функция, или она должна быть JS? В JS я недостаточно большой, чтобы узнать, есть ли это, но googling не показал никаких результатов, поскольку это была функция JS.

Мое второе предположение о том, почему это неправильное расслоение, состоит в том, что div являются абсолютными позициями друг на друга.

Если вы можете использовать jQuery для отображения и скрытия элементов на странице, это было бы намного проще.

источник

2012-06-18 14:06:26 Charlie

Я пробовал с jquery и простым div, то есть внутри div никого другого. Все еще происходит с терминалами с Android 2.1 и ниже. спасибо –

привет, ребята. Кто-нибудь знает, могу ли я изменить html на html5, эта проблема решена? спасибо –

помог ли мой ответ? если да, поддержите его и/или принимайте. – Charlie

расслоение внутри HTML внутри webview

ответ

Смежные вопросы