输入类型的宽度=文本元素
为什么当我这样做时：
<input type="text" style="width: 10px; padding: 2px"/>
<div style="width: 10px; border: solid 1px black; padding: 2px"> </div>
输入最终比 IE6 和 FF3 中的 div 宽 2 px？ 我缺少什么？
编辑： 正如很多人所说，边界是问题所在。 如果我在输入上设置 border: 0px，它将与具有 0 px 边框的 div 具有相同的宽度（通过将其包装在有边框的 SPAN 内进行验证）。
然而，当我测量 Paint 中的元素时，div 的内部尺寸为 14 px，正如预期的那样 (10+2+2)。 然而，输入有一个 16 像素的内部，然后在其外部有一个边框。 为什么是这样？ 可能不是一个错误，因为它发生在 IE6 和 FF3 中，但我不明白它。
How come when I do this:
<input type="text" style="width: 10px; padding: 2px"/>
<div style="width: 10px; border: solid 1px black; padding: 2px"> </div>
the input ends up 2 px wider than the div in both IE6 and FF3? What am I missing?
EDIT:
As many people have said, the border is the issue. If I set border: 0px on the input, it will have the same width as the div with a 0 px border (verified by wrapping it inside a bordered SPAN).
However, when I measure the elements in paint, the div has a 14 px interior, just as expected (10+2+2). The input, however, has a 16 px interior, and then a border outside of that. Why is this? Probably not a bug since it happens in both IE6 and FF3, but I dont understand it.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
我相信这就是浏览器呈现标准输入的方式。 如果在输入上设置边框：
那么两者的宽度相同，至少在 FF 中是这样。
I believe that is just how the browser renders their standard input. If you set a border on the input:
Then both are the same width, at least in FF.
元素的可见宽度为
宽度+填充+边框+轮廓，因此您似乎忘记了输入元素上的边框。 也就是说，大多数（某些？）浏览器上输入元素的默认边框宽度实际上计算为 2px，而不是 1。 因此，您的输入显示为 2px 宽。 尝试在输入上显式设置border-width，或者使您的 div 更宽。The visible width of an element is
width + padding + border + outline, so it seems that you are forgetting about the border on the input element. That is, to say, that the default border width for an input element on most (some?) browsers is actually calculated as 2px, not one. Hence your input is appearing as 2px wider. Try explicitly setting theborder-widthon the input, or making your div wider.输入宽度为 10 + 2 乘以 1 像素（边框）
input width is 10 + 2 times 1 px for border
我认为你忘记了边界。 Div 上有一个像素宽的边框将减少总长度的两个像素。 因此，看起来 div 会比实际短两个像素。
I think you are forgetting about the border. Having a one-pixel-wide border on the Div will take away two pixels of total length. Therefore it will appear as though the div is two pixels shorter than it actually is.