当宽度设置为 100% 时，div 的内容比 div 本身长吗？ [复制]

Posted 2023-03-06

【中文标题】当宽度设置为 100% 时，div 的内容比 div 本身长吗？ [复制]

【英文标题】：Content of div is longer then div itself when width is set to 100%? [duplicate]

【发布时间】：2011-07-10 07:04:21

【问题描述】：

我有固定宽度的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%;

结果（火狐）：

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

【参考方案1】：

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

【讨论】：

overflow: auto 无济于事。事实上，它只会添加丑陋的滚动条。

【参考方案2】：

您需要重置内边距、边距和边框。如果你想在全站范围内应用它，你可以使用像 Eric Meyer's 这样的重置 css：http://meyerweb.com/eric/tools/css/reset/

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

【参考方案3】：

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 用于 icky IE7 兼容方法。}

【讨论】：

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

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

所以我可以将 div 上的填充设置为 0 并删除边框（这只是为了显示问题 - 在生产 html 中不需要）来修复它？

@drasto：不。这是input 元素上的边框/填充。要明白我的意思，看看这个夸张的演示：jsfiddle.net/QkmSk/4

这一定是有史以来最伟大的 CSS 属性。

【参考方案4】：

当我使用您的代码时，它在 Firefox 上显示良好。我怀疑你对特异性有疑问：http://htmldog.com/guides/cssadvanced/specificity/

或者，周围的html有问题。 IE。未封闭的标签。

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

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

希望这会有所帮助。

【讨论】：

这与特异性或无效 HTML 无关。请参阅我的答案的未修复版本：jsfiddle.net/QkmSk/1 - 不可否认，Firefox 中的效果不是很明显，但红色边框被 input 覆盖。

使用 Firefox 3.6.14 的情况并非如此。 OP 提供的代码在这里完美运行，无需任何调整。输入框在红色边框内。

我在 4 个主要浏览器中观察到问题，如问题所述，演示代码是用空白页 html 编写的，html 标签没有属性，所以我无法想象那里有任何问题。尝试按ctrl+'+'

提高浏览器的分辨率

hmm.. 看来我的浏览器已进入怪癖模式。 翻白眼 :)