输入类型的宽度=文本元素 [英] Width of input type=text element

问题描述

如何做到这一点：

<input type="text" style="width: 10px; padding: 2px"/>
<div style="width: 10px; border: solid 1px black; padding: 2px">&nbsp;</div>

输入结束比IE6和FF3中的div宽2像素？我缺少什么？

the input ends up 2 px wider than the div in both IE6 and FF3? What am I missing?

编辑：
正如许多人所说，边界是问题。如果我在输入上设置border：0px，它将具有与具有0像素边框的div相同的宽度（通过将其包装在边界SPAN内来验证）。

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).

然而，当我测量油漆的元素，div有一个14像素的内部，正如预期（10 + 2 + 2）。然而，输入有一个16像素的内部，然后一个边界外面。为什么是这样？

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.

推荐答案

我相信这只是一个问题，浏览器呈现其标准输入。如果在输入上设置边框：

I believe that is just how the browser renders their standard input. If you set a border on the input:

<input type="text" style="width: 10px; padding: 2px; border: 1px solid black"/>
<div style="width: 10px; border: solid 1px black; padding: 2px"> </div>

然后两者宽度相同，至少在FF中。

Then both are the same width, at least in FF.

这篇关于输入类型的宽度=文本元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！