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

Question

我的div固定宽度仅包含input文本框，width的{​​{1}}设置为input。我希望它能填满100%，但会稍长一些。

演示代码：

HTML：

div

CSS：

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

结果（Firefox）：

这也发生在IE 8，Chrome，Safari ......溢出宽度似乎在不同的浏览器中有所不同。 如何使内容准确填充.container { width: 300px; height: 30px; border: thin solid red; } .content { width: 100%; } ？

的宽度

Answer 1

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

这will work in all modern browsers和IE8 +。

以下是演示：http://jsfiddle.net/thirtydot/QkmSk/301/

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

_{See here用于兼容IE7的兼容方法。}

Answer 2

您需要重置填充，边距和边框。如果你想在全网范围内申请，你可以使用像Eric Meyer这样的重置css：http://meyerweb.com/eric/tools/css/reset/

或者你可以写自己的。只需将其默认为您自己的值

Answer 3

还要为您的页面添加CSS重置。输入可能添加了一些填充！

Answer 4

当我使用你的代码时，它在Firefox上显示正常。我怀疑你有特定问题：http://htmldog.com/guides/cssadvanced/specificity/

或者，周围的html存在问题。即未封闭的标签。

尝试将CS​​S和HTML放入普通文件中以查看它是否正确显示。如果是这样，我建议看一下父元素的CSS属性。

如果您还没有，请下载适用于Firefox的Web Developer Toolbar，然后使用CTRL + SHIFT + F启用可点击元素属性显示。这将帮助您调试正在发生的事情。

希望这有帮助。