読者です 読者をやめる 読者になる 読者になる

<input type="hidden"> と <table>(いまさらIE7)

こういうhtmlを書く必要があった。

<table>
  <tr>
    <input type="hidden" name="hoge1" value="fuga1">
    <td>1行目</td>
  </tr>
  <tr>
    <input type="hidden" name="hoge2" value="fuga2">
    <td>2行目</td>
  </tr>
  <tr>
    <input type="hidden" name="hoge3" value="fuga3">
    <td>3行目</td>
  </tr>
</table>

このとき、IE7だとテーブルの上に謎のスペースができてしまう。

解決策:

以下のように改変。

<table>
  <tr>
<input type="hidden" name="hoge1" value="fuga1"><td>1行目</td>
  </tr>
  <tr>
<input type="hidden" name="hoge2" value="fuga2"><td>2行目</td>
  </tr>
  <tr>
<input type="hidden" name="hoge3" value="fuga3"><td>3行目</td>
  </tr>
</table>

inputタグの前後にスペースやら改行やらが入っていると問題らしい。

補足:
そもそも、この書き方自体がhtmlの記述の仕方に反しているので、よくないと思う。
以下更なる対処法。

<table>
  <tr>
    <td style="display: none;"><input type="hidden" name="hoge1" value="fuga1"></td>
    <td>1行目</td>
  </tr>
  <tr>
    <td style="display: none;"><input type="hidden" name="hoge2" value="fuga2"></td>
    <td>2行目</td>
  </tr>
  <tr>
    <td style="display: none;"><input type="hidden" name="hoge3" value="fuga3"></td>
    <td>3行目</td>
  </tr>
</table>

これなら反していない。はず。