为什么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解决了这个问题，因为它可以确保渲染的输入字段是指定的宽度。

Answer 2

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

您可以使用CSS3 Calc来避免此问题：

width: calc(100% - 4px);

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

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

Answer 3

输入的填充导致了这个及其边界。请参阅updated fiddle。如果您检查输入，您将看到它不再重叠：

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