2

私は次のHTMLを持っています

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <style>
    .box {
        border: solid black 1px;
        padding: 0px;
        margin: 0px;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <input class="box" style="width:300px;" /><br /><!--CRLF for clarity only-->
        <input class="box" style="width:150px;" /><!--CRLF for clarity only-->
        <input class="box" style="width:150px;" /><!--CRLF for clarity only-->
    </form>
</body>
</html>

テキスト ボックスの 2 番目の行をレンダリングすると、最初の行の 1 行よりも累積的に長くなるように見えます。これは、スタイル属性による明示的な幅の設定にもかかわらず

これはなぜ発生し、回避できますか?

注: これは、FF3 と IE7 の両方で同じように動作するようです。

4

4 に答える 4

23

幅に含まれていないテキスト ボックスの境界線があります。

于 2009-01-05T16:23:49.130 に答える
7

jhunterは正しいので、FireFoxにはFirebugが必要だと付け加えておきます（無料です）。これをインストールすれば、すぐに理解できたはずです。関心のある要素を調べて、[レイアウト]タブを確認します。

于 2009-01-05T16:36:06.607 に答える
4

実際、ボックスの幅は、左右の境界線として +2 (1px) で、ボックスごとに 2 つの余分なピクセルがあることを意味します。つまり、合計で +6 です。

于 2009-01-05T16:29:27.167 に答える
3

CSS Masteryを読むことをお勧めします。これは、さまざまなブラウザボックスモデルとの多くの違いと、それらがさまざまなブラウザのレイアウトと幅にどのように影響するかを説明しています。

CSSマスタリー

于 2009-01-05T16:33:30.373 に答える