html - 选择框中的文本填充

Question

我刚刚遇到了一个晦涩的问题，即select框在文本周围有额外的空格，这似乎不是框模型的一部分。这是我的意思的两张照片：





Here is an example of it happening (on JSFiddle)，或者您可以在下面查看我的示例的来源：

select, input
{
	padding:0px;
	font-size:20px;
}
select.textIndent
{
	text-indent:-1.5px;
}
select.paddingOffset
{
	padding-left:2.5px;
}
input.paddingOffset
{
	padding-left:5px;
}

<h3>No Padding Test</h3>
<select>
	<option>Item 1</option>
	<option>Item 2</option>
	<option>Item 3</option>
</select><br />
<input type="text" value="Item 1" />
<h3>Negative Text Indent</h3>
<select class="textIndent">
	<option>Item 1</option>
	<option>Item 2</option>
	<option>Item 3</option>
</select><br />
<input type="text" value="Item 1" />
<h3>Padding Offset</h3>
<select class="paddingOffset">
	<option>Item 1</option>
	<option>Item 2</option>
	<option>Item 3</option>
</select><br />
<input class="paddingOffset" type="text" value="Item 1" />

我已经找到了两种方法来解决此问题，方法是使用负的text-indent或使用左填充调整input和select框以使其匹配。

这两种方法都不完美。如果text-indent和select依次排列，则Chrome和Firefox的input负数之间会存在明显差异。尝试偏移填充会导致在您要应用一定百分比的填充时维护各种input和select字段的样式有些困难。

我首先在客户的网站上注意到了该词，但该词的一部分被截断了，但是如果那里没有空白，该词看起来就很合适。



虽然我可以为我的客户解决此特定问题（例如，select框更宽，填充较少），但我想知道是否存在其他方法来隐藏/偏移/删除左侧/右侧的“其他”填充的文字。我应该看看另一个CSS属性吗？

我觉得这可能只是select框的工作方式，但我希望SO的整体配置能够证明我错了。

编辑1

我希望解决方案是纯CSS。我知道，如果使用JS库对select框使用直接替换，则不会有相同的问题。

编辑2

为了更好地说明我要做什么，select框在框模型之外还有一个额外的填充。下图显示select框为6px，input框为〜3px。我想控制此特定填充或将其完全删除。我已经尝试过使用text-indent并使用填充偏移量来对齐input和select元素中的文本，但是这两个都显得有些拙劣。我认为有一种更好的CSS方式可以做到这一点。

Answer 1

不幸的是，这个额外的空格是由浏览器的渲染引擎添加的。表单元素的呈现在浏览器之间不一致，在这种情况下，表单元素的呈现不是由CSS确定的。

看一下this article from Mozilla解释一些减轻选择框不一致性的方法，然后您可能会从Smashing Magazine上阅读this article有关样式元素的样式（请务必查看注释以及人们对select所遇到的问题）。