字体溢出Chrome上的文本输入

Question

我遇到导致＆＃34;文字溢出的字体问题＆＃34;在Chrome中的输入元素。这是我创建的JSFiddle：

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

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

Answer 1

尝试从输入中删除边距并将溢出：隐藏到封闭的div http://jsfiddle.net/dvjkh7xs/

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

这不是一个完美的解决方案。它需要你用div包围输入。你也可以使用带有显示的跨度来围绕它：inline-block。

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

Answer 2

它看起来像一个铬虫。从版本37开始，他们已经更改了文本呈现引擎，因此这可能是一个错误。同时在输入中添加填充

Answer 3

我冒昧地猜测它也与字体有关。尝试在框中输入“Lj”大写L小写j。 'j'的左侧卷曲也位于'L'的下方。

我只想补充一下：

text-indent: .2em;

到输入框。它会使非'''字符从左侧略微缩进，但我怀疑用户是否会因为输入框中有一些左边的空格而停止使用您的网站：）