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

Question

为什么输入字段/文本字段上的 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;

亲切的问候

Answer 1

输入字段的宽度包括 padding 和任何 border 集，因此 100% + 1px padding + 2px border = overlap。

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