当前位置： 文江博客话题详情

ie6 上的 z-index 问题

发布于 2024-09-27 13:42:16 字数 1704 浏览 5 评论 0原文

嘿，

我在 ie6 的一个 bug 上运行了几个小时，这不是我锁定的唯一一个，它仍然只是为了解决这个问题，我终于会安静了。

我构建了一个垂直菜单，问题是尽管有 z 索引，第二级菜单并不与第一级菜单重叠。在FF下是无可挑剔的，在ie6下还算可以。

这是我的代码，如果你能帮助你大大减轻我的负担：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title></title>
  </head>
<style type="text/css">
<!--


* {
    margin: 0;
    padding: 0;
}
div#menu {
    width: 100px;
}
div#menu ul {
    padding: 0;
    width: 100px;
    border: 1px solid green;
    margin: 0px;
    background: yellow url();
    position: absolute;
    z-index: 1;
}

div#menu ul li {
    position: relative;
    list-style: none;
}
div#menu ul ul {
    position: absolute;
    top: 0px;
    left: 10px;
    display: block;
    background: red url();
    z-index: 999;
    border: 1px solid black;
}
div#menu li a {
    text-decoration: none;
}
//-->  

</style>  
  <body>
    <div id="menu">
       <ul>
          <li><a href="">menu 1</a></li>
          <li><a href="">menu 2</a>
             <ul>
                <li><a href="">Sous menu 2.1</a></li>
                <li><a href="">Sous menu 2.2</a></li>
             </ul>
          </li>
          <li><a href="">menu 3</a></li>
          <li><a href="">menu 4</a></li>
          <li><a href="">menu 5</a></li>
       </ul>
    </div>
  </body>
</html>
原文

Hy,

I run for several hours on a bug ie6, it was not the only one that I was locking it remains only to solve this one and I would finally be quiet.

I have a vertical menu that I built, the problem is that the second level menu does not overlap with that of the first level despite the z-index. Under FF is impeccable, in ie6 it fair.

here is my code, if you could help you relieve me greatly:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title></title>
  </head>
<style type="text/css">
<!--


* {
    margin: 0;
    padding: 0;
}
div#menu {
    width: 100px;
}
div#menu ul {
    padding: 0;
    width: 100px;
    border: 1px solid green;
    margin: 0px;
    background: yellow url();
    position: absolute;
    z-index: 1;
}

div#menu ul li {
    position: relative;
    list-style: none;
}
div#menu ul ul {
    position: absolute;
    top: 0px;
    left: 10px;
    display: block;
    background: red url();
    z-index: 999;
    border: 1px solid black;
}
div#menu li a {
    text-decoration: none;
}
//-->  

</style>  
  <body>
    <div id="menu">
       <ul>
          <li><a href="">menu 1</a></li>
          <li><a href="">menu 2</a>
             <ul>
                <li><a href="">Sous menu 2.1</a></li>
                <li><a href="">Sous menu 2.2</a></li>
             </ul>
          </li>
          <li><a href="">menu 3</a></li>
          <li><a href="">menu 4</a></li>
          <li><a href="">menu 5</a></li>
       </ul>
    </div>
  </body>
</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

简美 2024-10-04 13:42:16

试试这个插件： http://docs.jquery.com/Plugins/bgiframe ，会起作用的！

用法：$('.your-dropdown-menu').bgiframe();

try this plugin: http://docs.jquery.com/Plugins/bgiframe , will work!

usage: $('.your-dropdown-menu').bgiframe();

回复 原文
最好是你 2024-10-04 13:42:16

试试这个

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Test Case</title>
  </head>
<style type="text/css">
<!--


* {
    margin: 0;
    padding: 0;
}
div#menu {
    width: 100px;
}
div#menu ul {
    padding: 0;
    width: 100px;
    border: 1px solid green;
    margin: 0px;
    background: yellow;
    position: absolute;
    z-index: 1;
}

div#menu ul li {
    list-style: none;
}
div#menu ul ul {
    position: absolute;
    left: 10px;
    display: block;
    background-color: red;
    z-index: 2;
    border: 1px solid black;
}
div#menu li a {
    text-decoration: none;
}
//-->  

</style>  
  <body>
    <div id="menu">
       <ul>
          <li><a href="">menu 1</a></li>
          <li>
             <ul>
                <li><a href="">Sous menu 2.1</a></li>
                <li><a href="">Sous menu 2.2</a></li>
             </ul>
             <a href="">menu 2</a>
          </li>
          <li><a href="">menu 3</a></li>
          <li><a href="">menu 4</a></li>
          <li><a href="">menu 5</a></li>
       </ul>
    </div>
  </body>
</html>

Try this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Test Case</title>
  </head>
<style type="text/css">
<!--


* {
    margin: 0;
    padding: 0;
}
div#menu {
    width: 100px;
}
div#menu ul {
    padding: 0;
    width: 100px;
    border: 1px solid green;
    margin: 0px;
    background: yellow;
    position: absolute;
    z-index: 1;
}

div#menu ul li {
    list-style: none;
}
div#menu ul ul {
    position: absolute;
    left: 10px;
    display: block;
    background-color: red;
    z-index: 2;
    border: 1px solid black;
}
div#menu li a {
    text-decoration: none;
}
//-->  

</style>  
  <body>
    <div id="menu">
       <ul>
          <li><a href="">menu 1</a></li>
          <li>
             <ul>
                <li><a href="">Sous menu 2.1</a></li>
                <li><a href="">Sous menu 2.2</a></li>
             </ul>
             <a href="">menu 2</a>
          </li>
          <li><a href="">menu 3</a></li>
          <li><a href="">menu 4</a></li>
          <li><a href="">menu 5</a></li>
       </ul>
    </div>
  </body>
</html>
回复 原文
嗳卜坏 2024-10-04 13:42:16

ie6 工作在相对位置而不是绝对位置

    div#menu ul {
        position:relative;
        z-index:0;
    }
   div#menu ul ul{
        z-index:2;
    }

请检查这一点

ie6 work on position relative more than absolute

    div#menu ul {
        position:relative;
        z-index:0;
    }
   div#menu ul ul{
        z-index:2;
    }

Please check this one

回复 原文
~没有更多了~

关于作者

海风掠过北极光

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

玍銹的英雄夢

文章 0 评论 0

我不会写诗

文章 0 评论 0

十六岁半

文章 0 评论 0

浸婚纱

文章 0 评论 0

qq_kJ6XkX

文章 0 评论 0

旧伤还要旧人安

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文