web-dev-qa-db-ja.com

入力タイプの幅=テキスト要素

私がこれを行うとどうなりますか:

<input type="text" style="width: 10px; padding: 2px"/>
<div style="width: 10px; border: solid 1px black; padding: 2px">&nbsp;</div>

iE6とFF3の両方で、入力はdivよりも2ピクセル広いことになりますか?私は何が欠けていますか?

編集:多くの人が言っているように、国境が問題です。入力にborder:0pxを設定すると、0 pxの境界を持つdivと同じ幅になります(境界のあるSPAN内にラップすることで検証されます)。

ただし、ペイントで要素を測定すると、divの内部は14ピクセルになります(10 + 2 + 2)。ただし、入力の内部は16ピクセルで、その外側に境界線があります。どうしてこれなの? IE6とFF3の両方で発生するため、おそらくバグではありませんが、理解できません。

17
erikkallen

それがブラウザが標準入力をレンダリングする方法だと思います。入力に境界線を設定した場合:

<input type="text" style="width: 10px; padding: 2px; border: 1px solid black"/>
<div style="width: 10px; border: solid 1px black; padding: 2px"> </div>

その場合、少なくともFFでは、両方とも同じ幅になります。

20
pegasus4747

visible要素の幅はwidth + padding + border + outlineなので、入力要素の境界線を忘れているようです。つまり、ほとんどの(一部の?)ブラウザの入力要素のデフォルトの境界線幅は、実際には1ではなく2ピクセルとして計算されます。したがって、入力は2ピクセル幅で表示されます。入力でborder-widthを明示的に設定するか、divを広くしてみてください。

4
jason

入力幅は10 + 2 xボーダーの1 px

0
Perica Zivkovic

国境を忘れていると思います。 Divに1ピクセル幅の境界線があると、テイクアウェイ全長2ピクセルになります。したがって、divは実際よりも2ピクセル短いように表示されます。

0
Matthew Jones