z-index в IE 6 и IE 7

Question

У меня был вложенный div, как показано ниже:

<div id="header"><div class="header-content">
 <div class="button"></div>
 <div id="menu"></div>
</div>
  <ul>
    <li></li>
  </ul>
</div>

Теперь мой код JavaScript такой:

<script>
 $(".button").click(function(){
   $("#menu").css({
     position:"absolute",
     zIndex:50000,
     display:"block"
   });
 });
</script>

Это нормально работает в Firefox, но в IE 6 и IE 7 это не главное Любой, кто имел опыт в этом, помогите мне, пожалуйста!

Answer 1

Точно так же

var show = function(){
  var menu = document.getElementById("menu");
  menu.style.position = "absolute";
  menu.style.zIndex = "50000";
  menu.style.display = "block";
  menu.style.top = 0;
}

работает абсолютно нормально для меня без JQuery. Для IE6 и IE7. К сожалению, сейчас я не могу тестировать с JQuery.

Является ли этот пример точным кодом, который вы используете?

Answer 2

Ваша проблема, вероятно, связана с CSS, а не с javascript. Проводник обрабатывает дочерние, родительские и родственные элементы z-index, отличные от других браузеров.

Эта статья по z-index , о которой я писал недавно, может вам помочь.

Эта статья сейчас недоступна, так что вот архив машины обратного хода

Answer 3

Полагаю, вы пытаетесь поместить div вместо <select>, <iframe> или <embed> / <object>, например Flash.

Это известная ошибка в более ранних версиях IE.
Есть способ обойти это, поместив свой div в iframe, но это не красиво.

Answer 4

Проблема может заключаться в том, что ваш элемент меню пуст, и поэтому IE сворачивает его, чтобы вы не могли его увидеть. (По крайней мере, с вашим примером кода это может быть проблемой. Если ваша разметка на самом деле не выглядит так, пожалуйста, покажите нам, как она на самом деле выглядит ...)

Попытка:

<div id="header">
    <div class="header-content">
        <div class="button">& nbsp;</div>
        <div id="menu">& nbsp;</div>
    </div>
    <ul>
        <li>& nbsp;</li>
    </ul>
</div>

РЕДАКТИРОВАТЬ: пробелы между & и nbsp; не должны быть там, но SO на самом деле не будет печатать код, если я только что написал   ...

Answer 5

<form action="ketqua.tintuc" name="myform">
    <div class="Search-text-box"> <img src="http://xalo.vn/1.gif" onclick="return _e_(event,0)" />
        <input type="text" name="q" value="{query/@query}" text="{query/@query}" />
        <input id="hq" type="hidden" name="hq" value="{query/@hiddenquery}" />
        <div class="Search-menu">
            <xsl:choose>
                <xsl:when test="@category-label != ''">
                    <xsl:value-of select="@category-label" />
                </xsl:when>
                <xsl:otherwise>
                    Search all
                </xsl:otherwise>
            </xsl:choose>
        </div>
    </div>
    <div class="search-btn"></div>
    <div id="Search-header-menu">
    <ul>
        <li> <a cat="">Tìm tất cả</a> </li>
    </ul>
</form>

это весь мой настоящий html-код, а ниже - именно код javascript:

$("#Search-header-menu").css({
      top: top,
      left:left,
      display:"block",
      background:"#fff"
    });