跨浏览器字母间距

Question

我遇到了跨浏览器字母间距的问题，导致不同浏览器中的盒子/输入框关闭，尤其是safari和chrome。

如图所示，其中一个看起来正常，而另一个看起来很正常。有没有人对此有任何修复？

font-family: 'Arial Narrow', Arial, sans-serif;
font-size:13px;

Answer 1

我问这个问题的原因是因为我的网站有：

<div style="width:300px">Text: <input width="260px" /></div>

所以正在发生的事情是，文本最终会在不同的浏览器中长几个像素，从而导致输入框的结束时间延长。

我注意到不同的浏览器不可避免地会使某些字体略有不同，而且字母间距确实无法解决。

因此，我没有改变字母间距以使输入框匹配 - 而是让输入框用百分比而不是像素长度填充其内部div的剩余空间。这样，每个输入框在所有浏览器中的同一点结束，最终匹配。

感谢大家的帮助。

我是怎么做到的：

<强> HTML：

<div style="width:300px">
  <label>Text:</label>
  <span><input /></span>
</div>

<强> CSS：

label { float: left; }
span { display: block; overflow: hidden; }
input { width: 100%; }