宽度为 100% 的输入字段“到达”填充答案

【问题标题】：Inputfield with width 100% "reaches" into padding宽度为 100% 的输入字段“到达”填充
【发布时间】：2011-07-26 04:49:08
【问题描述】：

我有一个带有输入字段的表格单元。 Inputfield 应该填满 Tablecell，但不能达到它的填充。我所拥有的看起来像这样（带有萤火虫）：

我希望输入字段保持在蓝色区域内，而不是进入紫色区域。

而且：当然，我首先阅读了这里有关此主题的所有问题。我阅读了所有内容，但找不到任何真正解决该问题的答案。

它应该适用于所有现代浏览器（ie7 也是如此）；

我用 jsfiddle 做了一个minimal live Example，我尝试了其他问题中的所有解决方案，但我就是无法让它工作。 a) 是否有可行的解决方案？ 和 b) 是否有一个很好的解决方案？

为什么这在所有浏览器中都是一个问题？我认为这是 CSS 中的错误规范。因为如果我说“100%”当然我希望元素适合“100%”的内容区域。 让它流入填充和边距的用例是什么？

【问题讨论】：

我已经多次回答这个问题了。这是更好的版本之一：stackoverflow.com/questions/5219030/…
是的......再次......我阅读了所有问题，但你的解决方案不起作用或至少在我的情况下不起作用。
为什么你对那些试图帮助你的人如此沮丧？
对此我感到非常抱歉。我上班迟到了，一整天都在处理一个非常非常令人沮丧的 CSS 问题，没有进一步了解我实际要做的事情。（没有人应该担心的那种问题，因为这应该可以正常工作）。所以特地向三十点道歉。
没有像其他“标准”那样的“案例”CSS 是由无知的嬉皮士设计的。仅仅因为某些东西是“标准的”并不意味着它是“好的”或“设计良好的”。如果你想在 IT 领域茁壮成长，最好放弃你的理想主义......这里没有它的地方！

标签： html css padding input-field

【解决方案1】：

这里的问题在于盒子模型，当您说width: 100% 时，它会根据可用的内容应用像素值（您可以在网络检查器的“计算样式”选项下看到）。但是，填充随后会添加到该宽度上，因此 5 像素的填充将计算为 100% + 10 像素的总宽度（每边 5 个）。

要解决此问题，您需要删除填充，或将其合并到宽度值中。例如：

input { width: 100%; padding: 0; }

或者

input { width: 90%; padding: 0 5%; } /* width totals 100% */

默认情况下，大多数表单元素都会继承一些填充；因此，即使您没有专门对输入应用填充，它仍然存在，因为浏览器默认它具有填充。

【讨论】：

这完全行不通。您忘记了border，这是一个与padding 完全相同的问题。碰巧border 在每一边通常只有1px，所以很难注意到。例如，请参阅：jsfiddle.net/thirtydot/dnCpF
没错，你会遇到边框问题。在大多数较新的浏览器中，您可以使用 -webkit-box-sizing:border-box / -moz-box-sizing:border-box / -ms-box-sizing:border-box /box-sizing:border-box 来解决这个问题盒子。这将允许盒子模型根据内容区域、填充和边框来计算宽度。所以“宽度：100%”将包括所有这些值，而不是排除它们。
@RussellUresti：是的，就是这样。有关示例，请参阅我对问题评论的链接答案。
普通...三十点...我已经阅读了您的所有答案，好吗？？？我真的试过了。但是兼容 ie7 的那个是行不通的。而且我绝对需要 ie7 合规性。
@Chris：“不工作”是什么意思？我看不出the IE7 compatible method 怎么会出错。你想让我用你的 jsFiddle 做一个例子吗？

【解决方案2】：

好吧，给你..

我正在使用 exact 与this answer 相同的方法。

见：http://jsfiddle.net/AKUsB/

CSS：

.inputContainer {
    background: #fff;
    padding: 3px 3px;
    border: 1px solid #a9a9a9
}
.inputContainer input {
    width: 100%;
    margin: 0; padding: 0; border: 0;
    display: block
}

HTML：

<div class="inputContainer">
    <input type="text" name="company" id="company" value="" class="formInputTextField" style="width: 100%;" />
</div>

【讨论】：

好的，谢谢，我得到了这个工作，但我必须使输入容器的填充右侧比左侧多 2 个像素，因为两侧的 1px 边框会导致输入字段将 2 个像素渲染到我的 td 元素的填充中。所以我所做的是：填充：3px 5px 3px 3px。如果您没有像示例中那样的 td 元素或其他围绕它的块元素，则不会发生这种情况。那么谢谢你的帮助。
您可以放置您喜欢的任何填充或边框，您不必像您描述的那样进行更改。例如：jsfiddle.net/AKUsB/1 但是如果你已经整理好了，那就别管它了，一切都好：P

【解决方案3】：

我认为你应该尝试使用

box-sizing: border-box

【讨论】：