Html 当宽度设置为 100% 时，div 的内容比 div 本身长吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5219030/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Content of div is longer then div itself when width is set to 100%?
提问by Rasto
I have divof fixed width containing only inputtext box and widthof that inputis set to 100%. I expect it to fill the divbut instead it is slightly longer.
我div的固定宽度只包含input文本框width，input并且设置为100%. 我希望它可以填满，div但它会稍微长一些。
Demonstration code:
演示代码：
HTML:
HTML：
<div class="container">
<input class="content" id="Text1" type="text" />
</div>
CSS:
CSS：
.container
{
width: 300px;
height: 30px;
border: thin solid red;
}
.content
{
width: 100%;
}
Result (Firefox):
结果（火狐）：
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?
这也发生在 IE 8、Chrome、Safari 中……溢出宽度似乎在不同浏览器中有所不同。如何使内容完全填充 的宽度div？
回答by thirtydot
box-sizing: border-boxis a quick, easy way to fix it:
box-sizing: border-box是一种快速、简单的修复方法：
This will work in all modern browsers, and IE8+.
这将适用于所有现代浏览器和 IE8+。
Here's a demo: http://jsfiddle.net/thirtydot/QkmSk/301/
这是一个演示：http: //jsfiddle.net/thirtydot/QkmSk/301/
.content {
width: 100%;
box-sizing: border-box;
}
See herefor an icky IE7 compatible method.
请参阅此处了解一个讨厌的 IE7 兼容方法。
回答by JohnP
You need to reset the paddings, margins and the borders. If you want to apply it sitewide, you can use a reset css like Eric Meyer's : http://meyerweb.com/eric/tools/css/reset/
您需要重置内边距、边距和边框。如果您想在整个站点范围内应用它，您可以使用像 Eric Meyer 的重置 css：http: //meyerweb.com/eric/tools/css/reset/
Or you can write your own. Just default it to your own values
或者你可以自己写。只需将其默认为您自己的值
回答by benhowdle89
Also add a CSS reset to you page. the input may have some padding added!
还要向您的页面添加 CSS 重置。输入可能添加了一些填充！
回答by Dave
When I use your code, it shows fine here on Firefox. I suspect you have an issue with specifity: http://htmldog.com/guides/cssadvanced/specificity/
当我使用您的代码时，它在 Firefox 上显示良好。我怀疑你有特定的问题：http: //htmldog.com/guides/cssadvanced/specificity/
Or, there is a problem with the surrounding html. I.e. unclosed tag.
或者，周围的html有问题。即未闭合的标签。
Try putting that CSS and HTML into a plain file to see if it displays correctly. If it does, I suggest taking a look at the CSS properties of the parent elements.
尝试将该 CSS 和 HTML 放入一个普通文件中，看看它是否能正确显示。如果是这样，我建议查看父元素的 CSS 属性。
If you don't have it already, download the Web Developer Toolbar for Firefox, then use CTRL + SHIFT + F to enable the clickable element property display. This will help you debug what is happening.
如果您还没有，请下载适用于 Firefox 的 Web Developer Toolbar，然后使用 CTRL + SHIFT + F 启用可点击元素属性显示。这将帮助您调试正在发生的事情。
Hope this helps.
希望这可以帮助。
