求助:z-index ie6、7下没效果(- -|| 急..)
直接上代码,左边的粉色box mouseover出现的灰色box会被右边的粉色box覆盖,设置其z-index 在ie6、7下没效果，ff、ie8没问题。
<!DOCTYPE html><html> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css"> <style type="text/css"><!-- body { font-size:12px; font-family:"宋体"; } .wrapper { margin:10px auto; width:700px; } dl { position:relative; margin-top:20px; } dt { display:table-cell; width:2em; height:1em; border:1px dotted #999; background:#eee; font-size:6em; text-align:center; vertical-align:middle; color:#999; } dt span { display:inline-block; font-size:14px; vertical-align:middle; } dd { display:none; position:absolute; top:0; left:0; padding:10px; width:140px; min-height:20px; _height:20px; border:1px solid #999; border-left:none; background:#ddd; line-height:1.4; z-index:999; } .cur { background:pink; color:red; cursor:pointer; } .bg { background:#ddd; border-style:solid; font-weight:bold; color:#000; } .w62 { width:1em; font-size:6em; } --></style> </head> <body> <div class="wrapper"> <table> <tr> <td valign="bottom" width="180"> <dl> <dt class="cur"> <span> 1101<br />90m<sup>2</sup> </span> </dt> <dd> 宿舍楼<br /> 宿舍号: 1101 2011 </dd> </dl> <dl> <dt class="w62 cur"> <span> 1101<br />90m<sup>2</sup> </span> </dt> <dd> 宿舍楼<br /> 宿舍号: 1101 2011 </dd> </dl> <dl> <dt> <span> 1101<br />90m<sup>2</sup> </span> </dt> <dd> </dd> </dl> </td> <td valign="bottom"> <dl> <dt> <span> 1101<br />90m<sup>2</sup> </span> </dt> <dd> </dd> </dl> <dl> <dt> <span> 1101<br />90m<sup>2</sup> </span> </dt> <dd> 宿舍楼<br /> 宿舍号: 1101 2011 </dd> </dl> <dl> <dt class="cur"> <span> 1101<br />90m<sup>2</sup> </span> </dt> <dd> </dd> </dl> <dl> <dt class="cur"> <span> 1101<br />90m<sup>2</sup> </span> </dt> <dd> 宿舍楼<br /> 宿舍号: 1101 2011 </dd> </dl> </td> </tr> </table> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type="text/javascript">//<![CDATA[ $(function(){ $('.cur').hover(function(){ $(this).addClass('bg').next().css({ 'left':$(this).width()+1 }).show(); },function(){ $(this).removeClass('bg').next().hide(); }) }) //]]></script> </body></html>
<!DOCTYPE html><html> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css"> <style type="text/css"> body { font-size:12px; font-family:"宋体"; } .wrapper { margin:10px auto; width:700px; } dl { margin-top:20px; } dt { display:table-cell; width:2em; height:1em; border:1px dotted #999; background:#eee; font-size:6em; text-align:center; vertical-align:middle; color:#999; } dt span { display:inline-block; font-size:14px; vertical-align:middle; } dd { display:none; position:absolute; top:0; left:0; padding:10px; width:140px; min-height:20px; _height:20px; border:1px solid #999; border-left:none; background:#ddd; line-height:1.4; z-index:999; } .cur { background:pink; color:red; cursor:pointer; } .bg { background:#ddd; border-style:solid; font-weight:bold; color:#000; } .w62 { width:1em; font-size:6em; } </style> </head> <body> <div class="wrapper"> <table> <tr> <td valign="bottom" width="180"> <dl> <dt class="cur"> <span> 1101<br />90m<sup>2</sup> </span> </dt> <dd> 宿舍楼<br /> 宿舍号: 1101 2011 </dd> </dl> <dl> <dt class="w62 cur"> <span> 1101<br />90m<sup>2</sup> </span> </dt> <dd> 宿舍楼<br /> 宿舍号: 1101 2011 </dd> </dl> <dl> <dt> <span> 1101<br />90m<sup>2</sup> </span> </dt> <dd> </dd> </dl> </td> <td valign="bottom"> <dl> <dt> <span> 1101<br />90m<sup>2</sup> </span> </dt> <dd> </dd> </dl> <dl> <dt> <span> 1101<br />90m<sup>2</sup> </span> </dt> <dd> 宿舍楼<br /> 宿舍号: 1101 2011 </dd> </dl> <dl> <dt class="cur"> <span> 1101<br />90m<sup>2</sup> </span> </dt> <dd> </dd> </dl> <dl> <dt class="cur"> <span> 1101<br />90m<sup>2</sup> </span> </dt> <dd> 宿舍楼<br /> 宿舍号: 1101 2011 </dd> </dl> </td> </tr> </table> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type="text/javascript">//<![CDATA[ $(function(){ $('.cur').hover(function(){ var left = $(this).offset().left + $(this).width() - 1; var top = $(this).offset().top; $(this).addClass('bg').next().css({ 'left':left, 'top' :top }).show(); },function(){ $(this).removeClass('bg').next().hide(); }) }) //]]></script> </body></html>
[解决办法]
ie7- 父元素的z-index决定子元素的z-index
http://andymao.com/andy/post/67.html