当宽度设置为100％时，div的内容长于div本身？ [英] Content of div is longer then div itself when width is set to 100%?

问题描述

我有一个 div ，只包含输入文本框和 code>的输入设置为 100％。

I have div of fixed width containing only input text box and width of that input is set to 100%. I expect it to fill the div but instead it is slightly longer.

演示代码：

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）：

Result (Firefox):

也发生在IE 8，Chrome，Safari ...溢出宽度似乎在不同的浏览器中有所不同。
如何使内容完全填满 div ？的宽度？

This happens also in IE 8, Chrome, Safari... The overflow width seems to vary in different browsers. How do I make the content to exactly fill the width of the div?

推荐答案

box-sizing：border-box 是一种快速，简单的解决方法：

box-sizing: border-box is a quick, easy way to fix it:

此将在所有现代浏览器中工作和IE8 +。

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

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

_{查看这里一个icky IE7兼容的方法。}

_{See here for an icky IE7 compatible method.}

这篇关于当宽度设置为100％时，div的内容长于div本身？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！