Question

请参阅下面的html

它在IE中运行良好，但在Firefox中它重叠..请尝试并给我解决方案。当td内部div的位置是静态的，它正常工作。但我需要绝对，因为我需要使用左侧和顶部属性。感谢任何帮助。谢谢

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

在Firefox中重叠

1 个答案: