为什么 <INPUT> 比我说的要宽？答案

【问题标题】：Why is <INPUT> wider than I told it to be?为什么 <INPUT> 比我说的要宽？
【发布时间】：2012-06-22 22:53:36
【问题描述】：

给定一个 <select> 和一个 <input> 元素，都指定为 200px 宽：

<!doctype html>
<body>
<select style="width: 200px"></select><br/>
<input  style="width: 200px" type="text">
</body>
<html>

一个比另一个宽^1,2,3,4：

这是什么原因？

如果有人可以给出原因，也许解决方案会很明显，而不是a hack&pray。

布局

应用的布局非常合理：

更新 1：当我写这个问题时Chrome updated itself from 17 to 19。

更新 2： 将 <input> 中的填充从 1 更改为 0：

<!doctype html>
<body>
<select style="width: 200px"></select><br/>
<input style="width: 200px; padding: 0" type="text">
</body>
<html>

不会使<input> 200px 变宽（即不修复它）。

更新 3： Applying a CSS reset：

<!doctype html>
<head>
<style type="text/css">
   * {
       padding: 0;
       margin: 0;
   }
</style>
<body>
<select style="width: 200px"></select><br/>
<input style="width: 200px; padding: 0" type="text">
</body>
<html>

没有解决问题：

另外，我对解决方案的兴趣不如解释。

脚注

^1,2,3 Chrome 1719, Firefox, Internet Explorer 9
⁴ 在 Windows 7 64 位上

阅读奖励

How to make <option> wider than <select> in IE6?（我不希望选项比选择更宽，我没有使用 IE6）
How to show extended option in select list?（下拉菜单的宽度与控件的宽度匹配）
HTML input element wider than Containing Div（此处不包含<div>）
How to line up HTML input elements?

【问题讨论】：

计算的样式显示什么？有什么填充物吗？
使用 CSS 重置并省去一些痛苦。
为所有设置相同的边距/填充
选择元素使用box-sizing: border-box。

标签： html css html-select html-input

【解决方案1】：

这一切都要追溯到 Netscape。

令人惊讶的是有多少人认为 IE 框模型是：

坏了
被微软破解
broken in IE6

更有趣的是：

the box model that Netscape created 客观上是“正确” (archive)
当 W3C 决定标准化一个盒子模型时，他们选择了一个客观上“错误”的盒子模型
他们选择了一个盒子模型，没有浏览器在做，也没有网站在使用

Netscape 和 IE 已经同意，如果你告诉某个东西是 200px 宽：它将是 200px 宽。然后人们不得不忍受这种荒谬的 W3C 盒子模型的陌生感，例如：

你告诉某事物是200px 宽，在符合标准的浏览器中它将是204px 宽
您告诉select 为200px 宽，在符合标准的浏览器中它将为200px 宽

HTML5 终于修复了 W3C 破盒模型

奇怪的是，一个 200px 宽的项目最终不是 200px 宽，以至于在 HTML5 中我们终于有能力返回到原始（正确的）Netscape/IE 框模型：

box-sizing: border-box

按钮75pxwide 是75pxwide。

演示：https://jsfiddle.net/argxojcp/

* {

}

td {
}

.correct {
    box-sizing: border-box;
}

<table>
<thead>
    <tr><th></th><th>Correct</th><th>W3C</th></tr>
</thead>
<tbody>
    <tr>
        <td>text input</td>
        <td><input type="text" class="correct" style="width: 100px;">
        <td><input type="text" style="width: 100px;">
    </tr>
    <tr>
        <td>select</td>
        <td><select class="correct" style="width: 100px;">foo</select>
        <td><select style="width: 100px;">foo</select>
    </tr>
    <tr>
        <td>button</td>
        <td><input type="button" class="correct" style="width: 100px;">
        <td><input type="button" style="width: 100px;">
    </tr>
    <tr>
        <td>image</td>
        <td><input type="image" class="correct" style="width: 100px; border: 1px solid black;">
        <td><input type="image" style="width: 100px; border: 1px solid black;">
    </tr>
    <tr>
        <td>password</td>
        <td><input type="password" class="correct" style="width: 100px;">
        <td><input type="password" style="width: 100px;">
    </tr>
    <tr>
        <td>submit</td>
        <td><input type="submit" class="correct" style="width: 100px;">
        <td><input type="submit" style="width: 100px;">
    </tr>   
    

</tbody>
</table>

【讨论】：

【解决方案2】：

你的不是太宽；你的

真正的问题是<select> 元素不表现得像大多数元素一样。它使用了一个
box-sizing: border-box;
其中width 是元素的宽度应用了内边距和边框；表现得好像它独自处于“怪癖”模式。

这与所有其他标准模式 html 元素背道而驰，它使用：
box-sizing: content-box; 
要修复它，请将 <select> 更改为使用与 html 其余部分相同的框模型：
select { box-sizing: content-box; }
或更改<input> 以使用与选择相同的框模型：
input { box-sizing: border-box; }

输入元素的行为与大多数元素一样，使用content-box 模型，其中width 是应用填充和边框之前元素的宽度。

您的浏览器设置了默认填充和边框，因此它比您想要和/或预期的要大。我总是在样式表的顶部使用“CSS 重置”，如下所示：

* {
    padding: 0;
    margin: 0;
}

这将确保任何元素上都没有默认填充或边距。

select 元素是另一种情况，它的行为更像是启用了box-sizing: border-box 的元素，它在width 规范中考虑了边框和填充。

如果您将 box-sizing: border-box 添加到您的 input 元素，它的行为将完全符合您的预期/想要。

编辑：粗体表示可能与您相关的部分。另一种解决方案是将输入元素的指定width 减少几个像素，使其与选择框的宽度匹配。

Fiddle 演示了这两种解决方案：http://jsfiddle.net/n4yT2/2/

【讨论】：

使用box-sizing: border-box 用于在解释width 的含义时启用Netscape/Quirks 模式。 CSS 规定 width 将不再指定盒子的 width，而是指定盒子 in 内容的 width。这似乎表明<select> 的行为完全符合其应有的行为，而<input> 是错误的（即只是因为我告诉它是200px 宽并不意味着它应该 200 像素宽）。所以，真的，我应该将box-sixing: content-box 应用于输入。无论哪种方式，它都没有解释为什么删除所有填充/边框不起作用。
content-box 是大多数元素的默认 box-sizing 属性，其中 is 指定“框内内容”的宽度。 border-box 指定元素的总宽度，这是 select 元素默认使用的宽度，这就是为什么当您将 CSS 宽度指定为 200px 时它的真实宽度为 200px。
"content-box 是默认的 box-sizing 属性" 除了在 <select> 元素中。我指责<input> 打翻了台灯，而实际上是<select> 坏了。
哦，看在上帝的份上，我又做了一次。就拍我吧。 :( header 部分是错误的，但胆量是正确的。
这刚刚解决了我遇到的问题，非常感谢！不过不要忘记使用相关的供应商前缀：-moz-box-sizing:border-box; -webkit-box-sizing：边框框； box-sizing: 边框框；

【解决方案3】：

似乎<select> 元素的行为就像它们有box-sizing: border-box。但是，尝试将其更改为 box-sizing: content-box 不起作用（至少在 Chrome 19、OSX 10.7.4 上）。

应用 CSS 重置后，由于输入框的边框，尺寸差异仍然存在。如果你删除它们，这两个元素的宽度都将是 200px。见demo。

【讨论】：

现在我知道了答案，很容易用谷歌搜索 (stackoverflow.com/questions/1450587/…)

【解决方案4】：

因为浏览器会处理输入框的尺寸（添加默认边框、填充、更改框大小等）以匹配它们（或操作系统的）本机 GUI 控件等效项。

不幸的是，破解和祈祷的解决方案是显而易见的。

【讨论】：

更新的问题包括在 Windows 上（7（64 位（专业）））

布局

脚注

阅读奖励

HTML5 终于修复了 W3C 破盒模型

你的 不是太宽；你的 太窄了！

你的不是太宽；你的