在Chrome浏览器上，字体溢出文本输入框

Question

我在Chrome中发现字体问题，导致输入元素的"文本溢出"。这里是我创建的JSFiddle：

http://jsfiddle.net/13e5q8Lf/2/

我尝试使用overflow-x属性等方法，但似乎没有影响它。有没有办法阻止这些额外的尾巴出现，或者这只是一个尚未修复的Chrome错误？

- trlemburg

---

看起来像是字距错误。 - j08691

我猜那是一个漏洞。文本不应该溢出框。 - jakubiszon

是的，我感觉以前也注意到过，而且不仅限于输入/文本区域（尽管在那里更明显）。请查看更新的 fiddle（添加了一个执行相同操作的段落）fiddle。 - tcmurphy

Answer 1

尝试从输入框中删除边距，并将overflow:hidden应用于封闭的div。http://jsfiddle.net/dvjkh7xs/

<div style="overflow:hidden">
<input style="padding: 0; margin:0; font-size: 100px;" type="text" />
</div>

这不是一个完美的解决方案。它需要你用 <div>将输入框包围起来。你可以使用 <span> 并将其设置为 display:inline-block。

<span style="overflow:hidden; display:inline-block">
<input style="padding: 0; margin:0; font-size: 100px;" type="text" />
</span>

- jakubiszon

Answer 2

看起来像是Chrome的一个bug。从37版本开始，他们已经更改了文本渲染引擎，所以这可能是一个bug。在此期间，请为输入框添加填充。

- jkojoa

Answer 3

我猜测这与字体有关。尝试在框中输入“Lj”，大写 L 小写 j。'j' 的左卷也会位于 'L' 下方。

我只想添加：

text-indent: .2em;

将非“j”字符略微缩进到左侧的输入框中。但我怀疑用户不会因为输入框中有一些左侧空白而停止使用您的网站 :)

- CodingWithSpike