これを行うとどうなりますか：
<input type="text" style="width: 10px; padding: 2px"/>
<div style="width: 10px; border: solid 1px black; padding: 2px"> </div>
入力は IE6 と FF3 の両方で div よりも 2 px 広くなりますか? 私は何が欠けていますか？
編集: 多くの人が言っているように、国境が問題です。入力に border: 0px を設定すると、境界が 0 px の div と同じ幅になります (境界のある SPAN 内にラップすることで確認されます)。
ただし、ペイントで要素を測定すると、div の内部は 14 ピクセルで、予想どおり (10+2+2) です。ただし、入力には 16 ピクセルの内部があり、その外側に境界線があります。どうしてこれなの？IE6 と FF3 の両方で発生するため、おそらくバグではありませんが、私には理解できません。
それがブラウザが標準入力をレンダリングする方法だと思います。入力に境界線を設定した場合:
<input type="text" style="width: 10px; padding: 2px; border: 1px solid black"/>
<div style="width: 10px; border: solid 1px black; padding: 2px"> </div>
次に、少なくともFFでは、両方が同じ幅です。
要素の表示幅はwidth + padding + border + outlineであるため、入力要素の境界線を忘れているようです。つまり、ほとんどの (一部の?) ブラウザの入力要素のデフォルトの境界線幅は、実際には 1 ピクセルではなく 2 ピクセルとして計算されます。したがって、入力は 2px 広く表示されます。入力に を明示的に設定するborder-widthか、div を広くしてみてください。
入力幅はボーダーの 10 + 2 x 1 ピクセルです
国境を忘れていると思います。Div に 1 ピクセル幅の境界線を設定すると、合計の長さが 2 ピクセルになります。したがって、div が実際よりも 2 ピクセル短いように見えます。