Nedávno jsem narazil na zajímavý bug v Internet Exploreru. Měl jsem div, do kterého jsem jeho obsah vkládal pomocí javascriptové funkce InnerHTML a tento obsah jsem pak potřeboval pomocí javascriptu skrýt či zobrazit. Začal jsem klasicky tím, že jsem mu měnil style na display=block / none podle toho, jak bylo potřeba. Vnitřní div měl navíc absolutní pozicování a Z-index, který ho zobrazoval jako okno nad textem stránky.
V opeře i firefoxu vše fungovalo jak mělo, divná věc se ovšem děla v internet exploreru. Pokud jsem totiž v MSIE div skryl pomocí display:none, explorer místo něj stejně nechal jednořádkovou mezeru a odsunul text za ním o řádek níž, zatímco pokud tam div byl, zobrazil se s absolutní pozicí nad textem a text za ním zůstal kde je.
Lámal jsem si s tím hlavu nějakou dobu, zkoušel jsem různé nastavení CSS, googloval všemožně až se zdálo, že tenhle bug nijak opravit nelze. Nakonec jsem to vyřešil šalamounsky a to tak, že jsem neposlušnému divu místo display:block/none nastavil pozici někam mimo stránku a bylo po starostech.
Zdrojový kód příkladu:
<html>
<body>
<script type="text/javascript">
function vlozInnerDiv() {
var innerDiv = '<div id="innerDiv" style="position:absolute;background-color:yellow;">div vložený přes innerHTML</div>';
document.getElementById('test').innerHTML = innerDiv;
}
function ukaz() {
//document.getElementById('innerDiv').style.display="block";
document.getElementById('innerDiv').style.top="auto";
}
function schovej() {
//document.getElementById('innerDiv').style.display="none";
document.getElementById('innerDiv').style.top="-200";
}
</script>
<a href="#" onclick="vlozInnerDiv();">vlož div přes innerHtml</a><br />
<a href="javascript:void()" onmouseover="ukaz();" onmouseout="schovej();">ukaz</a><br /><br />
První řádek textu..<br />
Druhý řádek textu. Řádky by měly být těsně u sebe<br />
Třetí řádek. Pod ním zkušební div<br />
<div id="test">
<div id="innerDiv" style="position:absolute; background-color:yellow; ">div v kódu</div>
</div>
Čtvrtý řádek - nad ním zkušební div<br />
Pátý řádek
</body>
</html>
A co použít visibility?
Kobi: visibility jsem taky zkoušel, ale narazil jsem s ní na nekompatibilitu v některém z prohlížečů.. bohužel už si teď nevzpomínám v kterém..