29

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

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

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

在此处输入图像描述

这是什么原因？

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

布局

应用的布局是完全合理的：

在此处输入图像描述

更新 1：当我写这个问题时，Chrome 将自己从17更新到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： 应用 CSS 重置：

<!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 17 19、Firefox、Internet Explorer 9
  • 4在 Windows 7 64 位

奖金阅读

4

4 回答 4

29

你的 <input> 不是太宽；你的 <select> 太窄了！

真正的问题是该<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输入元素的指定值减少几个像素，使其与选择框的宽度相匹配。

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

于 2012-06-20T18:29:35.447 回答
3

这一切都要追溯到网景。

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

更有趣的是：

  • Netscape 创建的盒子模型客观上是“正确的” （存档）
  • 当 W3C 决定标准化一个盒子模型时，他们选择了一个客观上“错误”的盒子模型
  • 他们选择了一个盒子模型，没有浏览器在做，也没有网站在使用

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

  • 你告诉某个东西要200px宽，在符合标准的浏览器中它会很204px宽
  • 你告诉 aselect很200px宽，在符合标准的浏览器中它会很200px宽

HTML5 终于修复了 W3C 破盒模型

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

box-sizing: border-box

按钮75px宽的地方很75px宽。

在此处输入图像描述

* {

}

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>

于 2018-08-21T14:57:23.160 回答
2

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

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

于 2012-06-20T18:22:10.130 回答
1

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

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

于 2012-06-20T18:44:30.380 回答