Div在火狐重叠

Question

请参阅下面的HTML

它在IE中正常工作，但在Firefox它重叠..请尝试并给我的解决方案。 当被赋予静态的TD内div的位置，它的工作properly.But我需要绝对没有，因为我需要使用左侧和顶部attributes.Any帮助appreciated.Thanks

<table style="height:auto; position:fixed;"> 
    <tr> 
     <td style="width:210px;padding:6px 6px 6px 6px;" class="contentBoxcontent"> 
      <div style="LEFT: 20px; WIDTH: 154px; CURSOR: move; POSITION: absolute; TOP: 0px; HEIGHT: 29px;" ><a href="#">Traffic Light</a></div> 
      <div style="LEFT: 0px; WIDTH: 161px; CURSOR: move; POSITION: absolute; TOP: 33px; HEIGHT: 110px;" ><img src="../common/Images/rollingstock.png" width="100%" height="100%" /></div> 
      <div style="LEFT: 0px;WIDTH: 198px; CURSOR: move; POSITION: absolute; TOP: 154px; HEIGHT: 66px;" ><ul><li>Traffic Light Information</li><li>Signalling Information</li><li>Euro Light</li></ul></div> 
     </td> 
     <td style="width:210px;padding:6px 6px 6px 6px;" class="contentBoxcontent"> 
      <div style="LEFT: 10px;WIDTH: 154px; CURSOR: move; POSITION: absolute; TOP: 0px; HEIGHT: 29px;"><a href="#">LED Dialight Iformation</a></div> 
      <div style="LEFT: 0px;WIDTH: 161px; CURSOR: move; POSITION: absolute; TOP: 33px; HEIGHT: 110px;"><img src="../common/Images/EN-12368_Euro.png" width="100%" height="100%" /></div> 
      <div style="LEFT: 0px;WIDTH: 198px; CURSOR: move; POSITION: absolute; TOP: 154px; HEIGHT: 66px;"><ul><li>Traffic Light Information</li><li>Signalling Information</li><li>Caltran Signals Light</li></ul></div> 
     </td> 

     <td style="width:210px;padding:6px 6px 6px 6px;" class="contentBoxcontent"> 
      <div style="LEFT: 10px;WIDTH: 154px; CURSOR: move; POSITION: absolute; TOP: 0px; HEIGHT: 29px;"><a href="#">Signalling Information</a></div> 
      <div style="LEFT: 0px;WIDTH: 161px; CURSOR: move; POSITION: absolute; TOP: 33px; HEIGHT: 110px;"><img src="../common/Images/caltransignals.png" width="100%" height="100%" /></div> 
      <div style="LEFT: 0px;WIDTH: 198px; CURSOR: move; POSITION: absolute; TOP: 154px; HEIGHT: 66px;"><ul><li>Traffic Light Information</li><li>Signalling Information Light Test Data..</li><li>LED Light</li></ul></div></td> 
    </tr> 
    </table> 

Answer 1

当然好它重叠。在每个浏览器中。您的绝对定位元素的值完全相同left/top值，它怎么会不？ （另外，你使用position: fixed，这将不会工作在IE6，但将建立在其他浏览器不同的含母公司）

正如理查德说，你可以给每个td元素position: relative从而使里面绝对定位相对于细胞。但是，如果因为它看起来像，都想要为三米的div并排侧，忘记了这两个绝对定位和表格，只是说：

<style> 
    .contentBoxcontent { 
     float: left; 
     width: 201px; height: 205px; 
     padding: 6px; margin: 2px; 
     cursor: move; 
    } 
    .contentBoxcontent a { margin-left: 10px; height: 29px; } 
    .contentBoxcontent img { display: block; width: 161px; height: 110px; } 
</style> 


<div class="contentBoxcontent"> 
    <a href="#">Traffic light</a> 
    <img src="../common/Images/rollingstock.png" alt="" /> 
    <ul> 
     <li>Traffic light information</li> 
     <li>Signalling information</li> 
     <li>Euro light</li> 
    </ul> 
</div> 

<div class="contentBoxcontent"> 
    <a href="#">LED dialight information</a> 
    <img src="../common/Images/EN-12368_Euro.png" alt="" /> 
    <ul> 
     <li>Traffic light information</li> 
     <li>Signalling information</li> 
     <li>Caltran signals light</li> 
    </ul> 
</div> 

<div class="contentBoxcontent"> 
    <a href="#">Signalling information</a> 
    <img src="../common/Images/caltransignals.png" alt="" /> 
    <ul> 
     <li>Traffic light information</li> 
     <li>Signalling information</li> 
     <li>Light test data</li> 
     <li>LED light</li> 
    </ul> 
</div>