宽度设置为100％时，div的内容会比div更长吗？

我有div固定宽度只包含input文本框和width那input设置为100%。我预计它会填充div，但是它稍微长一些。宽度设置为100％时，div的内容会比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%; 
}

结果（火狐）：

enter image description here

这HAP钢笔也在IE 8，Chrome，Safari中......溢出宽度似乎在不同的浏览器中有所不同。如何使内容精确填充div的宽度？

2011-03-07 drasto

box-sizing: border-box是一种快速，简单的方法来解决这个问题：

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

_{See here为恶心IE7兼容的方法。}

2011-03-07 11:25:47 thirtydot

那么这种奇怪行为的原因是什么？ – drasto 2011-03-07 11:32:31

@drasto：您将宽度：100％应用于具有边框和填充的元素的事实。 'border-box'通过在'width：100％'计算中包含这个边界和填充*来解决这个问题。 – thirtydot 2011-03-07 11:34:26

所以我可以在'div'上设置填充为0并删除边框（即只显示问题 - 生产HTML中不需要）来修复它？ – drasto 2011-03-07 11:43:57

还为您添加CSS重设页面。输入可能会添加一些填充！

2011-03-07 11:24:53 benhowdle89

'overflow：auto'不会帮助。实际上，它只会添加丑陋的滚动条。 – thirtydot 2011-03-07 11:28:37

好点。从头开始。 – benhowdle89 2011-03-07 11:29:13

您需要重置填充，边距和边框。如果你想申请它在全站范围内，你可以使用像埃里克迈耶重置CSS：http://meyerweb.com/eric/tools/css/reset/

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

2011-03-07 11:25:16 JohnP

当我使用你的代码时，它在Firefox上显示得很好。我怀疑你有一个具体的问题：http://htmldog.com/guides/cssadvanced/specificity/

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

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

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

希望这会有所帮助。

2011-03-07 11:30:20 Dave

这与特异性或HTML无效无关。请参阅我的答案的不固定版本：http://jsfiddle.net/QkmSk/1/ - 不可否认，Firefox中的效果并不十分清晰，但红色边框由'input'覆盖。 – thirtydot 2011-03-07 11:33:22

在这里使用Firefox 3.6.14的情况并非如此。 OP提供的代码在没有任何调整的情况下完美运行。输入框位于红色边框内。 – Dave 2011-03-07 11:36:53

我在4个主要浏览器中观察问题，如问题所述，演示代码写在空白页面html中，'html'标签没有属性，所以我无法想象任何问题。尝试通过按'ctrl +'+'' – drasto 2011-03-07 11:47:43

回答