0

次の HTML を検討してください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<table cellspacing = "10" cellpadding="0" border="1" width="100%">
<tr>
    <td>
        <input style="border-width:1px; border-style:solid; width:100%; background-color:aqua">
    </td>
</tr>
</table>
</html>

次のように出力されます。ご覧のとおり、右側に少しオーバーラップがあります。

IE および Chrome での出力

入力ボックスが重複することなく TD の内部空間全体を占めるように、このコードを変更するにはどうすればよいですか?

次のような解決策を探していることに注意してください。

  • DOCTYPEタグとhtmlタグは上記の通りです。
  • 上記のように、コンテナー要素のサイズは固定されていません。

ありがとうございました。

4

1 に答える 1

1

JamWaffles で言及されているように、入力タグのスタイル要素に box-sizing: border-box を追加すると、問題が解決しました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<table cellspacing = "10" cellpadding="0" border="1" width="100%">
<tr>
    <td>
        <input style="box-sizing: border-box; border-width:1px; border-style:solid; width:100%; background-color:aqua">
    </td>
</tr>
</table>
</body>
</html>
于 2012-08-21T15:48:24.597 に答える