Question

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

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

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

enter image description here

这个原因是什么？

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

布局

应用的布局非常合理：

enter image description here

更新1 ：我正在撰写此问题Chrome updated itself from 17 to 19。

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

<!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>

无法解决问题：

enter image description here

另外，我对解决方案不感兴趣而不是解释。

脚注

^1,2,3 Chrome 17 19，Firefox，Internet Explorer 9
⁴

奖金阅读

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?

Answer 1

您的＆lt;输入＆gt;不是太宽;你的＆lt; select＆gt;太窄了！

真正的问题是<select>元素不的行为与大多数元素一样。它使用
box-sizing: border-box;
其中width是在填充后应用 元素的宽度并应用边框;表现得好像只是在“quirks”模式。

这与所有其他标准模式html元素相反，后者使用：

box-sizing: content-box;

要解决此问题，请更改<select>以使用与html其余部分相同的框模型：

select { box-sizing: content-box; }

或更改<input>以使用与select：
相同的盒子模型
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减少几个像素，以便它与选择框的宽度相匹配。

小提示演示两种解决方案：http://jsfiddle.net/n4yT2/2/

Answer 2

因为浏览器使用输入框的尺寸（添加默认边框，填充，更改框大小等）来执行操作，以使它们与它们（或操作系统的）本机GUI控件等效项匹配。

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

Answer 3

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

应用CSS重置后，由于输入框上的边框，大小差异仍然存在。如果你删除它们，两个元素将是200px宽。请参阅demo。

Answer 4

这一切都可以追溯到Netscape。

令人惊讶的是，有很多人认为IE盒模型是：

破碎
被Microsoft破坏
broken in IE6

更有趣的是：

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

Netscape和IE已经同意，如果您告诉某些内容为200px宽：它将为200px宽。然后人们不得不忍受那种荒谬的W3C盒子模型的陌生感，例如：

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

HTML5最终修复了W3C破碎盒模型

真奇怪，一个200像素宽的项目最终不会变成200像素宽，以至于在HTML5中，我们终于能够返回到原始的（正确的）Netscape / IE框模型：

box-sizing: border-box

其中75px宽的按钮是75px宽的按钮。

演示：https://jsfiddle.net/9k6r58mo/29/

* {

}

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>

为什么<input />比我说的要宽？

布局

脚注

奖金阅读

4 个答案:

您的＆lt;输入＆gt;不是太宽;你的＆lt; select＆gt;太窄了！

HTML5最终修复了W3C破碎盒模型