12

いくつかのクリック可能な要素を含むページがあり、代わりにそれらを s に変更して、jQuery で簡単に識別できるようにし<div>たいと考えています。<button>しかし、<div>s を<button>s に変更すると、サイズが変わります。(固定の幅と高さでスタイリングしていますが、ボタンは div とは異なる幅と高さでレンダリングされます。)

問題を再現する jsfiddle は次のとおりです: http://jsfiddle.net/AjmGY/

これが私のCSSです：

.styled {
    border: 4px solid black;
    background: blue;
    width: 100px;
    height: 100px;
}

そして私のHTML：

<div class="styled"></div>
<button class="styled"></button>

同じサイズのボックスが 2 つあるはずですが、一番下のボックス ( <button>) は著しく小さくなっています。この動作は、Windows (Chrome、FireFox、IE、Opera) と Android (組み込みブラウザーと Dolphin) の両方で試したすべてのブラウザーで一貫しています。

スタイルに追加display: block;してみましたが、両方とも同じルールを使用してレンダリングされる可能性があると考えていました (つまり、今はブロック要素なのでbuttonレンダリングを のようにしますdiv) が、効果はありませんでした。ボタンは小さいままでした。

境界線の幅を広げると、視差が大きくなります。borderボタンがのようにその上にあるのではなく、そのの中にあるかのように見えます。私が理解している限り、これはボックス モデルに違反していますが、W3C は次のように述べています。widthwidth<div>

ユーザー エージェントは、特定のユーザー インターフェイス要素 (ボタン、メニューなど) の境界線を「通常の」要素とは異なる方法でレンダリングする場合があります。

buttona の境界線が幅と高さの外側ではなく内側にあるのは、正常/文書化/予想される動作ですか? この動作に依存できますか?

(関連する場合、私のページは HTML5 doctype を使用します。)

4

1 に答える 1

10

ボタンやその他の入力コントロールは、デフォルトでボーダー ボックス モデルを使用してレンダリングされます。つまり、コンテンツ、パディング、ボーダーのすべてが、width宣言した合計になります。また、多くの場合、デフォルトのスタイルシートに従って、ブラウザーによって任意に追加されたパディングがあります。あなたが引用したように、これは許容される動作であり、標準に違反するものではありません。OS レベルの GUI コントロールのレンダリングに対応するためです。

をbuttonと同じサイズにdivするには、コンテンツ ボックス モデル (「元の」W3C ボックス モデル) に従ってサイズを変更し、そのパディングをゼロにします。

button.styled {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    padding: 0;
}

jsFiddle デモ

于 2011-12-06T04:37:29.150 に答える