相关疑难解决方法(0)

我怎么做的时候:

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

输入最终比IE6和FF3中的div宽2 px？我错过了什么？

编辑:正如许多人所说,边界是问题.如果我在输入上设置border:0px,它将具有与具有0 px边框的div相同的宽度(通过将其包装在有边界的SPAN中进行验证).

但是,当我测量绘画中的元素时,div的内部空间为14像素,正如预期的那样(10 + 2 + 2).但是,输入内部有16像素,然后是外部边框.为什么是这样？可能不是一个错误,因为它发生在IE6和FF3,但我不明白.

问题只发生input[type="text"]在Webkit中.无论我做什么,都会padding: 1px 0 0 1px在元素上产生额外的(仅限顶部和左侧).

类似的问题发生在Gecko中,input[type="text"]具有相同的额外功能padding: 1px 0 0 1px并且input[type="button"]具有额外的功能padding: 1px 0 0 0.

这是一个JSFiddle,向您展示我尝试过的所有内容,但没有任何作用:http://jsfiddle.net/PncMR/10/

有趣的是,当你将所有元素的行高设置为0(http://jsfiddle.net/PncMR/11/)时,唯一不受影响的元素是有问题的元素,所以我假设浏览器是默认的到特定的行高,我现在正在寻找一种覆盖它的方法.

我在webkit基础样式中找不到任何可以执行此操作的内容,但请随意检查自己:

http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

这不是moz-focus-inner问题,appearance: none问题,box-sizing问题或outline问题,我找不到任何其他解决方案.

编辑:请参阅下面的答案,了解垂直填充问题,但我仍然padding-left: 1px只在webkit和gecko中寻找文本输入的额外等价物的解决方案.(http://jsfiddle.net/PncMR/14/)

我正在尝试覆盖文本<input type="text">(用于跨浏览器placeholder支持).我发现我的定位总是偏离几个像素,因为某种填充无法通过设置去除padding: 0;.这里和这里的建议并没有解决问题.

您可以在Chrome的以下屏幕截图中看到此填充,作为蓝色突出显示和黄色边框之间的空白区域:

我怎样才能a)删除这个空间; 或b)使用Javascript测量它？