2

我有一个嵌套的 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 中它不是最重要的。任何有这方面经验的人请帮助我！

4

5 回答 5

4

完全相同的

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 进行测试。

这个例子是你使用的确切代码吗？

于 2009-05-22T09:23:01.087 回答
3

您的问题可能与 CSS 相关，而不是与 javascript 相关。Explorer 处理与其他浏览器不同的 z-index 子元素、父元素和兄弟元素。

我不久前写的关于 z-index的这篇文章可能会对您有所帮助。

这篇文章现在已经下架了，所以这里是回程机器的存档

于 2009-05-24T10:13:51.223 回答
1

问题可能是您的菜单元素是空的，因此 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实际上不会打印出代码&nbsp;......

于 2009-05-22T09:23:29.807 回答
1

我猜你是想把 div 放在 div 上<select>，<iframe>或者<embed> / <object>比如 Flash。

这是早期 IE 中的一个已知错误。
通过将您的 div 放在 iframe 中可以绕过它，但这并不漂亮。

于 2009-05-22T09:30:59.557 回答
0 
<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ả&lt;/a> </li>
    </ul>
</form>

这是我所有真实的 html 代码以及下面的 javascript 代码：

$("#Search-header-menu").css({
      top: top,
      left:left,
      display:"block",
      background:"#fff"
    });
于 2009-05-22T10:01:11.367 回答