html - 跨浏览器字母间距

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%; }