宽度为100％“到达”的Inputfield填充

Question

我有一个带有Intnfield的桌面。 Inputfield应该填满TableCell但没有达到其填充。我所看到的那样（用Firebug）：

我希望输入域保持在蓝色区域内，而不是将紫色的区域保持在紫色。

和：当然我首先阅读此主题的所有问题。我读完了它，我找不到任何实际解决的答案。

它应该在所有现代浏览器中工作（IE7也是如此）;

我制作了一个 minimal live example 用jsfiddle我在其他问题中尝试了所有解决方案但我只是无法做到这一点。 a）在那里有一个工作解决方案吗？和b）甚至有一个很好的和非工作服的解决方案？

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

Answer 1

Well, here you go..

I'm using the exact same method as this answer.

See: 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

The problem here is with the box model, when you say width: 100% it applies a pixel value based on what's available (which you can see under the "computed styles" option of a web inspector). However, padding is then added on to that width, so a padding of 5px would compute to a total width of 100% + 10px (5 for each side).

To fix this problem, you need to remove your padding, or incorporate it into your width value. For example:

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

Or

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

Most form elements, by default, inherit some amount of padding; so even if you're not specifically applying padding to the input, it's still on there because the browser defaults it to have padding.

Answer 3

I think you should try to use

box-sizing: border-box