在ie6上的z-index问题
[英]problem with z-index on ie6
问题描述
Hy, 
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. 我运行了一个小时的错误，即错误6，这不是我锁定的唯一错误，它仍然只能解决此错误，我最终会保持安静。
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. 我有一个内置的垂直菜单，问题是尽管z索引，第二级菜单与第一级菜单没有重叠。 Under FF is impeccable, in ie6 it fair. 在FF之下是无可挑剔的，也就是说，公平。
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>
3 个解决方案
解决方案1
1 2011-02-03 16:49:16
try this plugin: http://docs.jquery.com/Plugins/bgiframe , will work! 试试这个插件： http : //docs.jquery.com/Plugins/bgiframe ，将起作用！
usage: $('.your-dropdown-menu').bgiframe(); 用法：$（'。your-dropdown-menu'）。bgiframe（）;
解决方案2
0 2012-04-23 12:14:38
ie6 work on position relative more than absolute ie6在相对位置上的工作比绝对更多
div#menu ul {
position:relative;
z-index:0;
}
div#menu ul ul{
z-index:2;
}
Please check this one 请检查这个
解决方案3
0 2010-10-16 21:23:14
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.