当宽度设置为100%时,div的内容比div本身更长？

Question

我有div固定宽度只包含input文本框width,input并设置为100%.我希望它能填补div但反而稍微长一些.

演示代码:

HTML:

<div class="container">
    <input class="content" id="Text1" type="text" />
</div>

CSS:

.container
{
    width: 300px;
    height: 30px;
    border: thin solid red;
}
.content
{
    width: 100%;
}

结果(Firefox):

这也发生在IE 8,Chrome,Safari ......溢出宽度似乎在不同的浏览器中有所不同.如何使内容准确填充div？

Answer 1

box-sizing: border-box 是一种快速,简便的方法来解决它:

这适用于所有现代浏览器和IE8 +.

这是一个演示:http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

_{请参阅此处了解与IE7兼容的方法.}