7

ボタンと一部の CSS で奇妙な問題が発生しました。高さ = 高さ + パディングである古い IE5 ボックス モデルに準拠しているかのように動作していることに気付きました。

いくつかブラウジングした後、この記事に出くわしました。これは私の仮定を確認しましたが、なぜそうなのかを説明していませんでした。

最新のすべてのブラウザー (Firefox、Chrome、IE9) がボタン要素をこのように扱う理由を知っている人はいますか? そして、ボタン要素が（私が知る限り）それらのブラウザの他の要素が使用するボックスモデルを使用するようにするための回避策を知っている人はいますか?

4

3 に答える 3

3

ボタンがこのように動作することにさえ気づきませんでしたが、通常は入力要素を使用せず、同等の div を作成することを選択します。これは、すべてのブラウザーでスタイルを設定して外観を同じにするのがはるかに簡単だからです。

ボタンを div 要素のようにスケーリングするための回避策は、box-sizing属性をに設定することcontent-boxです。これは div のデフォルト値です。

button, input[type=button], input[type=submit]
{
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

JSFiddle の例を次に示します。

于 2012-08-03T14:54:14.223 に答える
2

現時点でこの質問をすることの面白い点は、JS / CSSコミュニティのハイエンドの人々の何人かが、本番プロジェクトでこのボックスモデルの非常に互換性のあるバージョンを使い始めたことです。

box-sizing : border-box最新のブラウザのほとんどが入力のように動作するようになります。
参照：Paul Irish-Border-Box FTW

直接的な利点は、実際に非配置fixed/非absolute配置要素のz-indexオーバーレイを実行する予定がない限り、負のマージンで遊ぶ必要なしに、すべてをはるかに高速に並べることができることです。

于 2012-08-03T15:31:39.417 に答える
0

<button>はインライン タグと見なされるため、当然、W3C ボックス モデルは使用されません。

これは純粋に論理的ですが、私は同意します。ポイントは、なぜブロックタグと見なされないのかということです。

button {
    width: 100px;
    padding: 0 30px;
}

#a { display: inline; }
#b { display: block; }
#c { display: inline; box-sizing: content-box; }
#d { display: block; box-sizing: content-box; }
<button id="a">aaa</button> 
<button id="b">bbb</button>
<button id="c">ccc</button>
<button id="d">ddd</button>

于 2012-08-03T15:00:20.920 に答える