宽度为 100% 的输入字段“到达”进入填充
我有一个带有输入字段的表格单元格。输入字段应填满表格单元格，但不会达到其填充范围。我所拥有的看起来像这样（带有 firebug）：
我希望输入字段保留在蓝色内区域，而不是冲入紫色区域。
并且：当然，我首先阅读了有关此主题的所有问题。我阅读了所有内容，但找不到任何真正解决该问题的答案。
它应该适用于所有现代浏览器（ie7 也是如此）；
我用 jsfiddle 制作了一个最小实时示例，其中我尝试了其他问题中的所有解决方案，但我只是无法让它发挥作用。 a) 是否有一个可行的解决方案？ 和 b) 是否有一个很好且非解决方案？
为什么这在所有浏览器中都是一个问题？我认为这是 CSS 中的错误规范。因为如果我说“100%”，我当然希望元素适合“100%”的内容区域。 让它流入内边距和边距的用例是什么？
i have a Tablecell with an Inputfield in it. The Inputfield should fill up the Tablecell but not reach into its padding. What i have looks like this (with firebug):
I want the inputfield to be kept inside the blue area and not raching into the purple one.
And: Of course i read all the questions here on this topic first. I read all of it and i could not find any answer which actually solved that.
It should work in all modern browsers (ie7 as well);
I made a minimal live Example with jsfiddle where i tried all the solutions in the other questions but i just could not get this to work. a) Is there a working solution for this? and b) Is there even a nice and non-workaroundish solution for this?
Why is this a problem in all browsers? I think this is a wrong specification in CSS. Because if i say "100%" of course i want the element to fit "100%" of the CONTENT Area. What is the use case for letting it flow into paddings and margins?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
好吧，给你..
我使用的方法与这个答案。
请参阅：http://jsfiddle.net/AKUsB/
CSS：
HTML：
Well, here you go..
I'm using the exact same method as this answer.
See: http://jsfiddle.net/AKUsB/
CSS:
HTML:
这里的问题在于盒模型，当您说
width: 100%时，它会根据可用的像素值（您可以在 Web 检查器的“计算样式”选项下看到）应用像素值。但是，填充会添加到该宽度上，因此 5 像素的填充将计算出 100% + 10 像素的总宽度（每边 5 像素）。要解决此问题，您需要删除填充，或将其合并到宽度值中。例如：
input { width: 100%;填充：0； }或
输入 { width: 90%;填充：0 5%； } /* 宽度总计 100% */默认情况下，大多数表单元素都会继承一定量的填充；因此，即使您没有专门对输入应用填充，它仍然在那里，因为浏览器默认它具有填充。
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.
我认为你应该尝试使用
I think you should try to use