为什么inputfield/textfield上的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填充+ 2px边界=重叠.

的box-sizing修正这一点,因为它保证了再现输入字段指定的宽度.