0

次の最も単純なコード サンプルがあります。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <style>
      input, select { height: 16px; padding: 3px; width: 14em; }
    </style>
  </head>
  <body>
    <form action="a" method="post" enctype="application/x-www-form-urlencoded">
      <input type="text" value="Hello" />
      <select id="country" name="country">
    <option value="-1">Select ... </option>
    <option value="217">United States</option>
      </select>
    </form>
  </body>
</html>

このコードは、高さ 16px、幅 14em の単純な選択ボックスを出力する必要があります。Firebug の [スタイル] タブには が表示されますheight: 16px;。[計算済み] タブをクリックすると、高さ 6px のボックス モデルが表示されます。Chrome のインスペクターには Styleheight: 16px;が表示されますが、"Metrics" には高さが 8px と表示されます。"Computed Styles" は 16px で高さを示します。

高さを具体的に 16px に設定すると、Firefox (Linux、12.0)とChrome (Windows、19 および Linux、21) の両方で予期しないアクションが発生する理由を誰か教えてもらえますか?

編集: 貼り付けの入力ボックスを見逃しました。16px の高さで「正しく」表示されます。

4

2 に答える 2

1

ブラウザには、設定した一部の CSS を上書きできる「ユーザー エージェント スタイルシート」と呼ばれるものが含まれています。<select>これが、ボックスがテキスト フィールドなどと異なって見える理由です。

ブラウザによって設定されることの 1 つは、<select>ボックスが「コンテンツ ボックス」ではなく「ボーダー ボックス」のサイズ設定を使用することです。したがって、 の高<select>さは、コンテンツの高さだけでなく、コンテンツ、パディング、ボーダーの高さです。

ユーザー エージェント スタイルシートをオーバーライドできます。

-moz-appearance: none;
-webkit-appearance: none;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;

あなた<select>が要求した正確な高さを提供します（ただし、クロムはありません）。

フィドルの例: http://jsfiddle.net/Zw6hY/2/

于 2012-06-05T20:18:12.193 に答える
1

各 Web ブラウザは、選択したスタイルを異なる方法で解釈します。Firefox は 16px の高さをパディング付きの高さの合計として取り、

16px(高さ) - 2*3px(パディング) = 10px の高さ

また、Safariはボーダーも高さの一部として取り、

16px(高さ) - 2*3px(パディング) - 2*1px(ボーダー) = 8pxの高さ

于 2012-06-05T20:22:03.310 に答える