проблема с z-index на ie6 - PullRequest
Новая
       58

проблема с z-index на ie6

0 голосов
/ 16 октября 2010

Hy,

Я запускаю несколько часов с ошибкой ie6, это была не единственная ошибка, которую я блокировал, осталось только решить эту проблему, и я наконец-то замолчу.

У меня есть вертикальное меню, которое я построил, проблема в том, что меню второго уровня не пересекается с меню первого уровня, несмотря на 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>

Ответы [ 3 ]

1 голос
/ 03 февраля 2011

попробуйте этот плагин: http://docs.jquery.com/Plugins/bgiframe, будет работать!

использование: $ ('. Your-dropdown-menu'). Bgiframe ();

0 голосов
/ 23 апреля 2012

ie6 работа на позиции относительно более абсолютной 

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

Пожалуйста, отметьте это

0 голосов
/ 17 октября 2010

Попробуйте это 

<!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>
...