9

次の CSS を使用する場合:

input[type=button] {
  background-color: white;
  border: 1px solid black;
  font-size: 15px;
  height: 20px;
  padding: 7px;
}

このHTMLで：

<input type="button" value="Foo" />

これが表示されると予想されるため、合計の高さは次のようになり36pxます。

1px  border
7px  padding
20px content (with 15px text)
7px  padding
1px  border

ただし、代わりに Firefox 3.6 と Safari 4 の両方で次のように表示されます: (他のブラウザではテストしていません)

スクリーンショット http://labs.spiqr.nl/upload/files/1223ef9cbae3ab6e43bd1f9215ebedb157ac7b22.png

1px border
7px padding
4px content (with 15px text) => height - 2 * border - 2 * padding
7px padding
1px border

なぜこれが起こるのか誰にも分かりますか？

(たとえそれが予期された動作であっても、その背後にあるロジックは何ですか?)

4

4 に答える 4

27

フォーム要素は伝統的に、CSS が装飾に影響を与えない OS ネイティブの UI ウィジェットとしてブラウザーによって実装されていたため、パディング/境界線を含むwidth/を持っていました。height

この動作を再現するために、Firefox などは CSS3 box-sizingスタイルを に設定して一部のフォーム フィールド (select、button/input-type-button) をレンダリングしborder-box、widthプロパティが境界線とパディングを含むレンダリング領域全体の幅を反映するようにします。

この動作を無効にするには、次のようにします。

select, button {
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
}

(または、「100%」幅を使用したいリキッド フォーム レイアウトでより一般的ですが、その他を に設定できますborder-box。)

-browser 接頭辞が付いたバージョンは、標準化プロセスがこれまでに行われる前にこれを実装したブラウザーをキャッチするために存在する必要があります。ただし、これは IE6-7 では効果がありません。

于 2010-02-14T11:22:35.517 に答える
1

あなたが試すことができるいくつかのこと：

于 2010-02-14T11:18:23.693 に答える
0

入力ボタンのパディングを削除して高さを約20に設定し、高さを調整してアンカー要素のパディングを調整しました。また、行の高さ、フォントサイズ、フォントファミリも設定します。

FF、IE、safari、chromeに取り組んだ：D

于 2010-09-30T11:07:44.153 に答える
0

要素の高さは、設定した値よりも自然に大きいため、これは理にかなっています。入力要素には高さが割り当てられます。この場合、要素のテキストを含めるのに十分な高さですが、それよりも小さい値に設定します。これを表示するには、高さの設定を削除します。

于 2010-02-14T11:25:07.220 に答える