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;. 单击“Computed”选项卡会显示一个 6px 的盒子模型高度。Chrome 的 Inspector 显示 Style height: 16px;，但“Metrics”显示高度为 8px。“Computed Styles”显示高度为 16px。

谁能告诉我为什么将高度专门设置为 16px 会导致 Firefox（Linux，12.0）和Chrome（Windows，19 和 Linux，21）出现意外操作？

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

4

2 回答 2

1

好的，所以每个 Web 浏览器都会以不同的方式解释选择样式。Firefox 将 16px 的高度作为带有填充的总高度，它使

16px(height) - 2*3px(padding) = 10px 的高度

此外，Safari 也将边框作为高度的一部分，它使

16px(height) - 2*3px(padding) - 2*1px(border) = 8px of height

于 2012-06-05T20:22:03.310 回答
1

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

浏览器设置的一件事是<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 回答