IE6下Z-index无效/不兼容/失效的解决办法【绝对原创】

原创 2011年01月15日 11:44:00

css

 

@charset "gb2312";
*{ margin:0; padding:0}
.clear{ clear:both;}
li{ list-style-type:none;}
.box {
 height: 300px;
 width: 300px;
 margin: 0 auto;
}
.box .test {
 display: none;
 background-color: #FFE8E8;
 border: 1px solid #FF0000;
 position: absolute;
 width: 100px;
 height: 50px;
 z-index: 999;
 left: 0px;
}
.box li {
 float: left;
 width: 100px;
 text-align: center;
}
.box a {
 color: #333333;
 text-decoration: none;
 font-weight: bold;
 display: block;
 line-height: 30px;
 background-color: #CCCCCC;
 z-index: 0;
}
.box a:hover {
 color: #FFFFFF;
 background-color: #006699;
}

 

 

 

 

 

 

html代码

 

<div class="box">
<ul>
<li><a href="#">链接一</a><div class="test">拉的积分垃圾速度快浪费</div></li>
<li><a href="#">链接一</a><div class="test">拉的积分垃圾速度快浪费</div>
</li>
<li><a href="#">链接一</a><div class="test">拉的积分垃圾速度快浪费</div>
</li>
<li><a href="#">链接一</a><div class="test">拉的积分垃圾速度快浪费</div>
</li>
<li><a href="#">链接一</a><div class="test">拉的积分垃圾速度快浪费</div>
</li>
<li><a href="#">链接一</a><div class="test">拉的积分垃圾速度快浪费</div>
</li>
</ul>
</div>
</body>
</html>
<script>
$('.box a').hover(function(){$(this).next('div').show();},function(){$(this).next('div').hide();});
$('.box a').next('div').hover(function(){$(this).show();$(this).prev('a').addClass('cur');},function(){$(this).hide();$(this).prev('a').removeClass('cur');});
$('.box li').hover(function(){$(this).css('position','relative');},function(){$('li').css('position','');});
</script>

解决IE6 z-index 无效的问题

在写一个网站的样式的时候,遇到IE6 下z-index 无效的问题,整得我好“头疼”,后面查查资料,终于把这个问题给解决了,解决的方法如下: 父标签position属性为relative或absolu...
  • zhjw009
  • zhjw009
  • 2014年03月01日 14:47
  • 742

ie7下子元素设置z-index无效的解决办法

html部分 首页 品牌 女装 女装: 耐克 阿...

CSS在IE6下的一些BUG和兼容性问题及解决办法

兼容性一直是前端的一大问题,也是让前端工程师很头痛的事情,在浏览器中,各厂商都有一套属于自己的标准和方法,从某种程度上看,是否能很好的处理兼容性问题,体现着一个前端工程师的水平,下面看一下CSS在IE...

z-index ie6下的解决方案

文章源链接:http://www.jb51.net/css/29329.html        点评:非同辈元素,任意一者或其祖元素拥有动态定位时,同时各自向上寻找动态定位的祖元素至共...

js-trim()方法IE无效的解决办法

  • 2014年05月15日 14:30
  • 2KB
  • 下载

ie6下select覆盖div的解决办法

  • 2011年12月24日 09:20
  • 56KB
  • 下载

解决IE6 select z-index无效,遮挡div的bug

在最近的一个项目中,遇到了IE6 select遮挡div的bug,为了解决这个bug我查了很多资料,试图找到一个最最有效的方法,很多人是通过iframe的方法来解决,其实我查了国外的很多资料也是通过i...

IE Javascript 脚本失效解决办法

  • 2012年02月29日 15:16
  • 22KB
  • 下载

div层调整z-index属性在IE中无效原因分析及解决方法

在写css代码时发现了一个很简单却又很多人应该碰到的问题,设置Z-INDEX属性无效,要让z-index起作用有个小小前提,就是元素的position属性要是relative,absolute或是fi...

ie7下z-index失效问题解决方法(详细分析)

绝对定位元素的“有定位属性(relative或absolute)的父元素”在渲染层次时起到了主要作用,前面的被后面的覆盖了。解决办法就是给有定位属性的父元素设置z-index 解决办法: 父级元素加上...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:IE6下Z-index无效/不兼容/失效的解决办法【绝对原创】
举报原因:
原因补充:

(最多只允许输入30个字)