Firefoxにおいてtable系でposition:relativeが効かない問題

Firefoxにおいてtable系でposition:relativeが効かない問題について

Firefoxのバグではなくその他ブラウザのrelativeが効いてしまうというバグらしいです。
問題の細かい話についてはこちらのブログを参照してください
table系にはposition:relativeが効かない – No.1026

Firefoxでrelativeの効かない組み方

<table>
  <tr>
    <td>
      <span class="left">left</span>
      <span class="right">right</span>
    </td>
  </tr>
</table>

table td {
  border: 1px solid #333;
  height: 100px;
  width: 100px;
  position: relative;
}
.left {
  left: 5px;
  position: absolute;
  top: 5px;
}
.right {
  bottom: 5px;
  position: absolute;
  right: 5px;
}

表示は以下のようになります。

Firefoxの[right]は画面の右下まで飛んでしまっています。

Firefoxでrelativeの効く組み方

tdの内側にposition:relativeのdivを一つ噛ませます。

<table>
  <tr>
    <td>
      <div class="posrel">
        <span class="left">left</span>
        <span class="right">right</span>
      </div>
    </td>
  </tr>
</table>

table td {
  border: 1px solid #333;
  height: 100px;
  width: 100px;
}
.posrel {
  position: relative;
}
.left {
  left: 5px;
  position: absolute;
  top: 5px;
}
.right {
  bottom: 5px;
  position: absolute;
  right: 5px;
}

この場合tdにpaddingを入れている場合内側のdivとサイズに差が出てきますので適時変更してください。