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

Question

我有一个固定宽度的

，里面只包含一个文本框，并将该的属性设置为100%。我期望它可以填充整个

，但实际上它略微过长。

演示代码：

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 的宽度？

- Rasto

Answer 1

box-sizing: border-box 可以快速、轻松地解决此问题:

这个方法在所有现代浏览器中使用，包括IE8+。

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

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

_{请在这里查看一种适用于令人不愉快的IE7兼容方法。}

- thirtydot

---

那么这种奇怪行为的原因是什么？ - Rasto

@drasto：你将width: 100%应用于一个具有边框和填充的元素，这是事实。 border-box通过在width: 100%计算中包含此边框和填充来解决此问题。 - thirtydot

那我可以将div的填充设置为0并移除边框（这只是为了显示问题，实际上在生产HTML中不需要）来解决它吗？ - Rasto

不可以。这是input元素上的边框/内边距。要了解我的意思，请查看这个夸张的演示：http://jsfiddle.net/QkmSk/4/。 - thirtydot

正是我所需要的！如果上述方法不起作用，请不要忘记使用 content-box 或 padding-box。 - Joseph Lust

Answer 2

你需要重置内边距、外边距和边框。如果你想要在整个网站上应用它，可以使用像Eric Meyer的reset css这样的重置样式表： http://meyerweb.com/eric/tools/css/reset/

或者你可以自己编写一个。只需将其默认为你自己的值即可。

- JohnP

Answer 3

同时在你的页面中添加CSS重置。输入框可能会被添加一些填充。

- benhowdle89

---

overflow: auto 不会有帮助。事实上，它只会增加不美观的滚动条。 - thirtydot

Answer 4

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

或者，周围HTML存在问题。例如未关闭的标签。

尝试将CSS和HTML放入一个纯文本文件中，看看是否正确显示。如果是这样，建议查看父元素的CSS属性。

如果你还没有下载Firefox的Web开发者工具栏，可以下载然后使用CTRL + SHIFT + F启用可点击的元素属性显示。这将帮助你调试出现的问题。

希望这有所帮助。

- Dave

---

与特异性或无效的HTML无关。请参见我的答案未修复的版本：http://jsfiddle.net/QkmSk/1/ - 诚然，在Firefox中效果不是很明显，但红色边框被“input”覆盖。 - thirtydot

这在使用Firefox 3.6.14时并不是这种情况。OP提供的代码在这里完美地工作，没有任何调整。输入框位于红色边框内。 - Dave

我在观察问题时使用了问题中提到的4个主要浏览器，演示代码是在空白页面HTML中编写的，html标签没有属性，所以我无法想象那里会有任何问题。尝试通过按下ctrl+'+'来增加您的浏览器分辨率。 - Rasto

哦，看起来我的浏览器进入了怪异模式。翻白眼 :) - Dave