宽度为100％的输入字段“到达”填充

Question

我有一个带有输入字段的Tablecell。 Inputfield应填满Tablecell，但不能覆盖其填充。我看起来像这样（用萤火虫）：

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

并且：我当然首先阅读了关于这个主题的所有问题。我阅读了所有内容，但我找不到任何能够解决问题的答案。

它应该适用于所有现代浏览器（也就是说7）;

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

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

Answer 1

嗯，你走了..

我正在使用完全与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>

Answer 2

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

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

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

或者

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

默认情况下，大多数表单元素都会继承一些填充量;所以，即使你没有专门对输入应用填充，它仍然在那里，因为浏览器默认它有填充。

Answer 3

我认为你应该尝试使用

box-sizing: border-box