为什么输入字段/文本字段的 100% 宽度重叠包含 div？答案

【问题标题】：Why does 100% width on inputfield/textfield overlap containing div?为什么输入字段/文本字段的 100% 宽度重叠包含 div？
【发布时间】：2013-07-11 15:19:10
【问题描述】：

为什么输入字段/文本字段的 100% 宽度与包含的 div 重叠？

http://jsfiddle.net/lassebjensen/Uujck/3/

CSS：

.red-div-400px{
    background-color:red;
    width:400px
}

.input{
    width: 100%;
    min-height: 28px;
}

HTML：

<div class="red-div-400px">
E-mail  
<input  class="input" type="text">
</div>

下面的这段代码解决了这个问题，但是导致重叠的原因是什么？为什么不能将文本字段的宽度设置为 100%？

 width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
 box-sizing: border-box;

亲切的问候

【问题讨论】：

这是导致这种情况的输入的填充及其边界。请参阅updated fiddle。如果您检查输入，您会发现它不再重叠。
正如 Brewal 所说：这里是小提琴jsfiddle.net/Uujck/8
box model 就是这样工作的，所以宽度为 100% + 填充意味着输入的大小将超过 100% wide。 CSS3 box-sizing 属性在元素内部添加填充，因此它不会增加整体宽度。

标签： html css input-field

【解决方案1】：

输入字段的宽度包括 padding 和任何 border 集合，因此 100% + 1px 填充 + 2px 边框 = 重叠。

box-sizing 修复了这个问题，因为它确保呈现的输入字段是指定的宽度。

【讨论】：

【解决方案2】：

您忘记了 2px 边框（每边）。

你可以使用 CSS3 Calc 来避免这个问题：

width: calc(100% - 4px);

演示：http://jsfiddle.net/Uujck/6/

要查看哪个浏览器支持它，请参考 CanIUse 或类似网站：http://caniuse.com/#feat=calc

【讨论】：

我不知道我们能做到这一点。所有浏览器都支持calc 吗？
如果有人感兴趣：Calc Support vs Box-Sizing support
Calc 不受支持。因此，更好的解决方案是盒子尺寸。如果您更改填充和/或边框大小，您也必须调整此代码

【解决方案3】：

造成这种情况的是输入的填充及其边界。请参阅updated fiddle。如果您检查输入，您会发现它不再重叠：

.input 
{
    width: 100%;
    min-height: 28px;
    padding: 0;
    border: none;
}

【讨论】：