0

以下の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>
4

1 に答える 1

1

もちろん、それは重なります。すべてのブラウザで。まったく同じleft/ <code>top 値を持つ要素を絶対配置していますが、どうしてできないのでしょうか? (さらにposition: fixed、IE6 では機能しない を使用していますが、他のブラウザーでは別の包含親を確立します。)

リチャードが言うように、内部の絶対値がセルに対して相対的に配置されるように、各td要素を指定できます。position: relativeしかし、見た目のように、横に 3 つの 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 に答える