singha board

Opět problém IE: Chcete kupříkladu po najetí myší nad položku menu otevřít roletku (div), která má překrýt pole formuláře (třeba select) pod ní. Ať děláte co děláte (z-index taky nepomůže), select je pořád nejvýš a nelze jej překrýt.

Na vině je (jak jinak) nevhodná implementace IE, kdy se některé elementy webových stránek (zejména formulářové prvky) použijí z operačního systému Windows. Při renderování stránky se pak zobrazují jako poslední a tedy překryjí vše, co je pod nimi, protože mají uměle vyvolaný nejvyšší z-index.

Naštěstí, ačkoliv předchozí výklad zněl bezesporu silně zoufale, existuje jakés takés řešení. Princip spočívá v “obalení” (v době renderování stránky) nebezpečných elementů pomocí iframe. Pokud tedy obalíme neposlušný select do iframe, bude se chovat tak, jak se od něj očekává (nebude překrývat to, co nemá).

ieHover = function() {
  var ieULs = document.getElementById('nav').getElementsByTagName('ul');
  for (j=0; j<ieULs.length; j++) {
    ieULs[j].innerHTML = ('<iframe src="about:blank" mce_src="about:blank" scrolling="no"
    frameborder="0"></iframe>' + ieULs[j].innerHTML);
    /*ieULs[j].innerHTML = ('<iframe id="iePad' + j + '" src="about:blank" mce_src="about:blank"
    scrolling="no" frameborder="0" style=""></iframe>' + ieULs[j].innerHTML);
    var ieMat = document.getElementById('iePad' + j + '');*/
    var ieMat = ieULs[j].firstChild;
    ieMat.style.width=ieULs[j].offsetWidth+"px";
    ieMat.style.height=ieULs[j].offsetHeight+"px";
    ieULs[j].style.zIndex="99";
  }
  /** IE script, který řeší změnu třídy při mouseover **/
  var ieLIs = document.getElementById('nav').getElementsByTagName('li');
  for (var i=0; i<ieLIs.length; i++) if (ieLIs[i]) {
    ieLIs[i].onmouseover=function() {
      this.className+=" iehover";
    }
    ieLIs[i].onmouseout=function() {
      this.className=this.className.replace(' iehover', '');
    }
  }
}
if (window.attachEvent) window.attachEvent('onload', ieHover);

written by singha