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>