为啥 <INPUT> 比我说的要宽？
Posted
技术标签:
【中文标题】为啥 <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阅读奖励
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。
【参考方案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。
*
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。
【讨论】：
现在我知道了答案，很容易用谷歌搜索 (***.com/questions/1450587/…)【参考方案4】：因为浏览器会处理输入框的尺寸（添加默认边框、填充、更改框大小等）以匹配它们（或操作系统的）本机 GUI 控件等效项。
不幸的是，破解和祈祷的解决方案是显而易见的。
【讨论】：
更新的问题包括在 Windows 上（7（64 位（专业）））以上是关于为啥 <INPUT> 比我说的要宽？的主要内容，如果未能解决你的问题，请参考以下文章