www.SAMURAJ-cz.com 

15.12.2017 Radana a Radan Translate to English by Google     VÍTEJTE V MÉM SVĚTĚ

Články

Internet Explorer - špatné zobrazování z-index objektu a formulářových prvků

Neděle, 12.10.2008 16:10 | Samuraj - Petr Bouška |
Při určité kombinaci vnoření prvků s position: relative, uvnitř kterých se nachází formulářové prvky a objekt, který je absolutně pozicovaný se z-indexem, aby byl nad formulářovými prvky, se tyto formulářové prvky zobrazí přes objekt. Tento problém se projevuje v Internet Exploreru 6 a 7 (jiné jsem netestoval). Ve Firefoxu 3 je vše korektní. Na konci článku je ještě zmínka o problému s getElementById v IE7.

Po dlouhé době jsem se konečně pustil trošku do AJAXu a pro svůj web www.realista.cz jsem vytvořil "našeptávač", který nabízí možná města při zadávání adres. Tehdy jsem narazil na tento problém.

Popsaná situace vypadá následovně:

Internet Explorer - špatné zobrazování z-index objektu a formuláře

Vyzkoušet si to můžete na tomto souboru ie_z-index.html.

Řešení je docela jednoduché a našel jsem jej v jedné diskusi na internetu, která se sice týkala trochu odlišné situace, ale v tomto případě funguje stejně.

Jde o to nastavit nějaký z-index (třeba 1) na objekty, v kterých je vnořený náš absolutní objekt, a které jsou na stejné úrovni jako objekty, které nám překrývají náš objekt. V mém případě je to řádek a fieldset.

Ukázka části kódu:

/* vynecháno */
<fieldset style="z-index:1">
    <legend>První část</legend>
    <div class="line" style="z-index:1"><label>První vstupní pole:</label><input type="text" size="50" maxlength="50" />
        <div id="abs">Absolutně pozicovaný blok<br />se z-index = 10</div></div>
    <div class="line"><label>Druhé vstupní pole:</label><input type="text" size="50" maxlength="50" /></div>
</fieldset>
/* vynecháno */

Pozn.: Jiné řešení je také umístit náš absolutní objekt hierarchicky výš než ty objekty, které jej překryjí. Ale většinou potřebujeme absolutní pozicování určovat od nadřazeného relativně pozicovaného objektu (aby byl na stejném místě v různých prohlížečích).

Po aplikaci z-indexu výsledek vypadá takto:

IE - špatné zobrazování z-index objektu a formuláře - oprava

Ukázkový kód je v souboru ie_z-index_fix.html.

Pozn.: Bohužel se tímto způsobem nevyřeší chyba Internet Exploreru 6 (v 7čce je již opravena), kdy se pomocí z-indexu nedá překrýt formulářový prvek select. Pro tuto situaci se používá řešení, kdy se pomocí JavaScriptu vloží iframe.

Internet Explorer 7 a problém s funkcí getElementById

Zároveň, když jsem objevil výše popsaný problém, jsem narazil ještě na jednu chybu Internet Exploreru (otestoval jsem pouze ve verzi 7). Jde o to, že jsem měl na stránce dva formuláře se stejným prvkem select. Oba tyto selecty měly stejné jméno (což by snad neměl být problém), ale ten druhý měl ještě nastaveno ID na stejnou hodnotu jako jméno. V JavaScriptu jsem pomocí getElementById adresoval ten druhý prvek, ale v IE7 jsem dostával zpět ten první, kdežto v FF bylo vše OK. Vyřešil jsem to tak, že jsem druhému prvku dal jiné ID a vše se začalo chovat dobře.

zobrazeno: 8513krát | Komentáře [5]

Autor:

Související články:

Problémy IE

Při tvorbě webových stránek často narazíme na problémy špatné implementace v Internet Exploreru.

Pokud se Vám článek líbil, tak mne potěšíte, když uložíte odkaz na některý server:

Pokud se chcete vyjádřit k tomuto článku, využijte komentáře níže. Pokud chcete poradit s nějakým problémem či diskutovat na nějaké téma, tak použijte fórum.

Komentáře

  1. [1] Blacktige

    bohužen z-index nefunguje ani v opravené verzi dokonce mi to nešlo ani ve firefoxu. IE 7 nezvládne ani jednu ukázku správně ukázat. Firefox ukáže správně jen tu první. Bude tam asi nějaká chybyčka. Ale IE 7 to podle mě nerozchodí ani po opravě. Jdu hledat dál jak ten problém vyřešit.

    Čtvrtek, 27.11.2008 23:13 | odpovědět
  2. [2] Blacktiger

    Tak jsem se v tom chvilku hrabal a máš pravdu funguje to. Funguje to ale jen jako interní cssko. Měl jsem to napsaný v externim a to nešlo.

    Čtvrtek, 27.11.2008 23:25 | odpovědět
  3. [3] Samuraj

    odpověď na [2]Blacktiger: Hm, tak to jsem nezkoušel.

    Ale měl jsem tu opravdu chybku, u druhého příkladu jsem měl z-index 0 místo 1, takže už to chodí OK.

    Pátek, 28.11.2008 11:09 | odpovědět
  4. [4] Chavier

    překrytí bohužel nefunguje pokud místo input vložíme select, nevi nekdo jak to opravit?

    Čtvrtek, 16.04.2009 14:11 | odpovědět
  5. [5] Radek

    Děkji, moc mi to pomohlo :-)

    Sobota, 07.08.2010 03:46 | odpovědět
Přidat komentář

Vložit tag: strong em link

Vložit smajlík: :-) ;-) :-( :-O


Ochrana proti SPAMu, zdejte následující čtyři znaky image code

Nápověda:
  • maximální délka komentáře je 2000 znaků
  • HTML tagy nejsou povoleny (budou odstraněny), použít se mohou pouze speciální tagy (jsou uvedeny nad vstupním polem)
  • nový řádek (ENTER) ukončí odstavec a začne nový
  • pokud odpovídáte na jiný komentář, vložte na začátek odstavce (řádku) číslo komentáře v hranatých závorkách