Question

我有以下最简单的代码示例：

<!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;。单击“计算”（Computed）选项卡可显示箱型号高度为6px。 Chrome的Inspector显示样式height: 16px;，但“度量标准”显示高度为8px。 “Computed Styles”显示高度为16px。

有人能告诉我为什么在16px专门设置高度会导致Firefox（Linux，12.0）和 Chrome（Windows，19和Linux，21）中出现意外动作吗？

编辑：错过了粘贴中的输入框。它“正确”显示在16px高度。

Answer 1

浏览器包含所谓的“用户代理样式表”，可以覆盖您设置的某些CSS。这就是为什么<select>框看起来与文本字段不同的原因。

浏览器设置的一件事是<select>框使用“border-box”大小，而不是“content-box”。因此<select>的高度是内容，填充和边框的高度 - 而不仅仅是内容的高度。

您可以覆盖用户代理样式表：

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

会给你<select>，这正是你要求的高度（但没有镀铬）。

示例小提琴：http://jsfiddle.net/Zw6hY/2/

Answer 2

好的，所以每个网络浏览器都会不同地解释选择样式。 Firefox使用填充作为总高度需要16px的高度，并且

16px（高度） - 2 * 3px（填充）= 10px的高度

此外，Safari还将边框作为高度的一部分，并使其成为

16px（高度） - 2 * 3px（填充） - 2 * 1px（边框）= 8px的高度

是什么原因导致此选择框以6px高度显示？

2 个答案: