2

次のHTMLマークアップがあり、テキストタイプの入力フォーム要素になります。

<!DOCTYPE html>
<html>
    <body>
        <input type="text" />
    </body>
</html>

まともなブラウザでは、次のスクリーンキャプチャのようにレンダリングされます（ズームされた画像の右側）。

サンプル

それでは、要素を検査するときに、ブラウザが2px<input>の境界線の幅を表示するのはなぜですか？入力要素が1ピクセルであることが視覚的にわかります。jQueryを使用しても、2pxを吐き出すようなことをすると。jQuery('input').css('border-width')

もちろん、これはスタイル設定されていないフォーム入力要素でのみ発生します。

JsFiddleデモも作成しました：http：//jsfiddle.net/HBDUZ/

ありがとう！

4

1 に答える 1

5

各ブラウザには、特定の要素のデフォルトのスタイルを含む組み込みのスタイルシート（「ユーザーエージェントスタイルシート」と呼ばれる）があります。

この場合（Chrome 25 beta-m、Windows）、スタイルは次のとおりです。

border: 2px inset;

の結果はinset、このJSFiddleで実際に表示され、背景色が対照的です。

于 2013-01-17T02:14:00.390 に答える