Vykreslení v Opeře? Problém!

Jedná se o export původního článku - obsah není nijak zkrácen ani upraven.  •  Článek byl původně vydán: 13.10.2007 v 20:25:16.  •  Zobrazit ostatní články

Vykreslení v Opeře? Problém!

Zdroj obrázku: neuvedeno

Asi každý, kdo si někdy vytvořil nějkou webovou stránku nebo prezentaci, si někdy vyzkoušel, jak přistupují webové prohlížeče k parsování a vykreslení zdrojového kódu. Některé se snaží vykreslovat obsah podle standardů (tzv. validně) a některé si vykreslijí jinak. Nedodržování standardů je způsobováno většinou dvěmi věcmi. Buď je prohlížeč zastaralý a nezná nové standardy, nebo je nový a jsou v něm implementovány i ještě neschválené předlohy standardů. Přikladů pro první kategorii je hodně, pro druhou už tolik ne, ze známějších prohlížečů se jedná například o Operu. Většinu chyb ve vykreslování lze téměř vždycky nějak obejít (ať už v PHP podle hlavičky prohlížeče, v JavaScriptu podle objektu navigator nebo podminkou v html). Bohužel občas člověk narazí na chybu, kterou nelze jednoduše vyřešit.

Operu jsem zmínil záměrně, protože dnešní příspěvek se týká zejména prohlížeče Opera (konkrétně verze 9.22 a verze 9.23).
Rychlou ukázkou je obrázek k tomuto příspěvku. Konkrétně si můžete vyzkoušet tento příklad zde. Jedná se o JavaScriptové udávání procent - původně určeno např. pro hodnocení. Abych nepsal sáhodlouhé romány ukaži hned zdrojový kód ... 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
 <head>
  <title>Titulek</title>
   <meta http-equiv="Content-Type" content="charset=windows-1250" />
   <meta name="author" content="Jmeno" />
   <meta name="copyright" content="&copy;2007 Jmeno" />
   <meta name="keywords" content="test,hlavicka,keywords,..." />

Kromě hlavičky taky použijeme nějaké ty styly.

<style>
  #main{width:350px;border:2px solid blue;padding-top:10px;}

  #table{margin-left:10px;width:290px;height:20px;border:none;position:absolute;}
  #table tr{height:20px;}
  #table tr td{/*width:105px;*/}
  #ok{background-color:green;margin-right:1px;}
  #no{background-color:red;margin-left:1px;}
  #submit{width:90px;}

  #procenta{width:200px;padding-top:4px;text-align:center;position:absolute;font-size:18px;}
  #zarovnani{width:290px;height:20px;padding-top:5px;}

  #debug{margin:10px;background:yellow;text-align:center;}
</style>

Zbytek stránky tvoří hlavní část z hodnocením funkčním bez JavaScriptu ... 

 </head>
 <body>
  <div id="main">
    <div id="manual"></div>

    <span id="hodn">
      Zadejte procenta: <input type="text" name="proc" id="hodnInp" value="64" />%</span> <br />
    <input id="submitInp" type="submit" value="Zadat">

    <script type="text/javascript">
      var widthOK='132';
      var widthNO='77';
    </script>

    <script type="text/javascript" src="proc.js"></script>
  </div>

 <body>
</html>

Ze statické stránky je to vše, zbývá jen JavaScript. Celý skript lze zobrazit zde.
Výsledek si můžete porovnat sami. V obrazku k příspěvku jsou screenshoty z různých prohlížečů.

Nahoru  •  Domů