移転しました。

au端末で縦1pxの隙間ができてしまうのを防ぐ方法

モバイルサイト開発のバッドノウハウ。
au端末では単純なdivを並べただけでも1pxの隙間ができてしまう。例えば、次のHTMLがこのようにみえる。

<html>
<body>
  <div style="background-color:#0000bb">
    <div style="background-color:#bb0000">
      #bb0000
    </div>
    <div style="background-color:#00bb00">
      #00bb00
    </div>
  </div>
</body>
</html>

20091018004907
外側のdivの背景色（#0000bb）が1px間に入っている。もちろん、インデントで使われているスペースや改行を除去しても状況は変わらない。
auのこの現象を防ぐにはtableタグを使わなければならない。

<html>
<body>
  <div style="background-color:#0000bb">
    <table border="0" cellpadding="0" cellspacing="0" style="width:100%">
      <tr style="background-color:#bb0000">
        <td>
          #bb0000
        </td>
      </tr>
      <tr style="background-color:#00bb00">
        <td>
          #00bb00
        </td>
      </tr>
    </table>
  </div>
</body>
</html>

20091018004908
これで外側のdivの背景色が表示されない。tableタグを使うとこのように上下ピタっとひっつかせることができる。