29

と要素が指定され、両方とも<select>200px幅に指定されています。<input>

<!doctype html>
<body>
<select style="width: 200px"></select><br/>
<input  style="width: 200px" type="text">
</body>
<html>

一方は他方よりも1、2、3、4広くなります。

ここに画像の説明を入力

これの理由は何ですか？

誰かが理由を説明できれば、おそらく解決策は明らかであり、ハックアンドプレイではありません。

レイアウト

適用されたレイアウトは完全に合理的です。

ここに画像の説明を入力

更新 1 : この質問を書いている間に、Chrome は17から19に更新されました。

更新 2:パディングを<input>1からゼロに変更する:

<!doctype html>
<body>
<select style="width: 200px"></select><br/>
<input style="width: 200px; padding: 0" type="text">
</body>
<html>

幅が<input> 200pxになりません (つまり、修正されません)。

更新 3: CSS リセットの適用:

<!doctype html>
<head>
<style type="text/css">
   * {
       padding: 0;
       margin: 0;
   }
</style>
<body>
<select style="width: 200px"></select><br/>
<input style="width: 200px; padding: 0" type="text">
</body>
<html>

問題を解決しません:

ここに画像の説明を入力

また、私は説明よりも解決策に興味がありません。

脚注

  • 1,2,3 Chrome 17 19、Firefox、Internet Explorer 9
  • Windows 7 64 ビットでは4

ボーナスリーディング

4

4 に答える 4

29

あなたの <input> は広すぎません。<select> が狭すぎます!

本当の問題は、<select>要素がほとんどの要素のように動作しないことです。それは

box-sizing: border-box;

パディングとボーダーが適用された後widthの要素の幅です。単独で「癖」モードであるかのように動作します。

これは、以下を使用する他のすべての標準モードの html 要素に反します。

box-sizing: content-box;

これを修正するには<select>、残りの html と同じボックス モデルを使用するように変更します。

select { box-sizing: content-box; }

または<input>、select と同じボックス モデルを使用するように変更します。

input { box-sizing: border-box; }

入力要素は、パディングと境界線が適用される前の要素の幅であるcontent-boxモデルを使用して、ほとんどの要素と同じように動作します。width

ブラウザによって設定されたデフォルトのパディングと境界線があるため、必要または予想よりも大きくなります。私は常に、スタイルシートの上部で次のように「CSS リセット」を使用します。

* {
    padding: 0;
    margin: 0;
}

これにより、どの要素にもデフォルトのパディングやマージンがないことが保証されます。

selectただし、要素は別のケースであり、有効な要素のように動作し、その仕様box-sizing: border-boxに境界線とパディングが考慮されます。width

要素に追加box-sizing: border-boxすると、input期待/希望どおりに動作します。

編集：あなたに関連する可能性のある部分を太字にしました。別の解決策は、入力要素の指定を数ピクセル減らしてwidth、選択ボックスの幅と一致させることです。

両方のソリューションを示すフィドル: http://jsfiddle.net/n4yT2/2/

于 2012-06-20T18:29:35.447 に答える
2

ブラウザーは、入力ボックスの寸法 (デフォルトの境界線の追加、パディング、ボックスのサイズ変更など) を処理して、それらの (またはオペレーティング システムの) ネイティブ GUI コントロールの同等物に一致させるためです。

ただし、残念ながら、ハックアンドプレイのソリューションは明らかです。

于 2012-06-20T18:22:10.130 に答える
1

<select>要素は以前のように動作するようですbox-sizing: border-box。ただし、変更しようとしてもbox-sizing: content-box機能しません（少なくともChrome 19、OSX 10.7.4では）。

CSS リセットを適用した後、入力ボックスの境界線のためにサイズの違いが残ります。それらを削除すると、両方の要素の幅がちょうど 200px になります。デモを参照してください。

于 2012-06-20T18:44:30.380 に答える