css - select の CSS 幅 (%) が他のタグよりも短い

Question

width: 90%いくつかの要素に適用しているときに、selectが他の要素よりも短くレンダリングされることに気付きました。

このjsfiddleはその動作を示しています。

Opera、IE9、Safari、Firefox、Chrome で確認しました。すべて同じ動作を示します。ということで、バグというよりはかなり変わった仕様のようです。

誰かが私の観察について詳しく説明できますか?

Answer 1

すべてのブラウザーは、UI 要素に特定の (そして異なる) スタイル設定を適用する場合があります。ブラウザー固有のスタイルを取り除くには、box-sizingプロパティを設定してみてください。

.width {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box; 
     box-sizing: border-box;
}

MDNに関する詳細情報