css - 重叠 div 上的 Z-index 冲突

Question

有点“麻烦”- 我遇到了 Z-index 的第一个问题，它只影响 FF 并且在 IE 中工作正常。我有 2 个相互重叠的水平 div，两者的宽度几乎都是 100%。在一个 div 的左侧有一个侧边栏，在第二个 div 的右侧有一个滚动条。两者具有相同的 Z-index，当我按下 IE 中的左侧栏时，它会激活链接，当我按下右侧的滚动条时，它工作正常。但在 FF 中 - 它不起作用。因此，要么我必须在左侧 div 上设置更高的索引，然后我将无法访问右侧，否则反之亦然。我需要同时使用两者，但我无法真正更改 div。有什么解决办法吗？我试过 javascript Z-index 移动但工作不顺利...谢谢。

#left_bar { 
position: relative;
margin-top:-112px;
margin-left:auto;
margin-right:auto;


}

#post_table { // THE SCROLL on the right
position: relative;
margin-top:-800px;
margin-left:auto;
margin-right:auto;
padding-left:182px;
left:-12px;






}

#bar_links { 
// THE LINKS on the left
position: relative;
margin-left:18px;
margin-right: auto;
padding-right:700px;
width: auto;
top:180px;


}
HTML:

<div align="center" id="left_bar" style="white-space:nowrap">
<img src="images/posting.png"/></div>
<div align="center" id="bar_links">    
<a href="javascript:;" onmouseout="MM_swapImgRestore();" 
onmouseover="MM_swapImage('images/slices/lipstick1','','images/slices/lipstick2.png',1);">
<img name="images/slices/lipstick1"src="images/slices/lipstick1.png" 
width="132" height="56" border="0" id="lipstick" /></a>
</div>
<div align="center" id="post_table" style="height: 730px; width:644px; overflow: auto;overflow-    x:hidden;">
<table width="640" id="table_main">
<tr>
<td>    

<?php 

echo "<table cellspacing='1' cellpadding='1' border='0' width='600' align='center'   
id='inner_table'><tr><td>";
    echo "<span style='font-size:11px;color:#dddddd;white-space:nowrap;background-  
image: url(images/branches.png);float:left'>&nbsp;".$post_date."&nbsp;</span>&nbsp;";
    echo "</td></tr><br/>";
    echo "<tr><td align='left' id='post_style'>";
    echo  $posting;
    echo "</tr></td>";
    }; ?>

</td>
</tr>
</table>
</div>

Answer 1

我可以肯定地说，您几乎肯定会遇到问题:您的 HTML 根本无效。

单独这一行会在不同的浏览器中做不同的事情:

echo "</td></tr><br/>";

其次，您谈到了z-index 问题，但您提供的代码中没有没有。我们如何修复不存在的东西？

您的问题肯定是 $posting; 在 FF 中不显示，但在 IE 中显示。原因很简单:您的 #post_table 是在 #left_bar 和 #bar_links 之后定义的。这就是为什么它出现在它们下方的原因。

我不知道您的想法是什么，但我可以向您确认，使用大量的负边距将很难管理。现在您定义了 2 个框并将第三个框移动到上方/下方它们...

这是一个 jsFiddle使用在 FF 和 IE 中看起来相似的稍微修正+改编的代码。

您应该首先重新考虑您的布局...并学习正确的 HTML 和 CSS。