0

请看下面的html

它在 IE 中工作正常，但在 Firefox 中它重叠..请尝试给我解决方案。当 td 中 div 的位置为静态时，它工作正常。但我需要绝对存在，因为我需要使用 left 和 top 属性。感谢任何帮助。谢谢

    <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>
4

1 回答 1

1

当然，它重叠。在每个浏览器中。你是绝对定位元素，具有完全相同的left​/​<code>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>
于 2009-12-12T14:10:51.133 回答