字体在Chrome浏览器上的文本输入中溢出

我遇到了在Chrome中的输入元素上导致“文本溢出”的字体问题。下面是我创建了一个的jsfiddle：字体在Chrome浏览器上的文本输入中溢出

我一直在使用overflow-x性质和诸如此类的尝试，但它似乎并不影响它。有没有办法阻止这些额外的尾巴出现，或者这只是一个尚未解决的Chrome bug？

2014-09-03 trlemburg

看起来像一个字距问题。 – j08691 2014-09-03 15:36:43

我想这是一个错误。文本应该不会溢出框。 – Jakub 2014-09-03 15:36:50

是的，我觉得我已经注意到了这一点，它不仅限于输入/ textareas（尽管它更明显）。看看更新的小提琴（添加一个段落，做同样的事情）[小提琴]（http://jsfiddle.net/13e5q8Lf/5/） – tcmurphy 2014-09-03 15:49:07

尝试从输入去除余量，并给溢出：隐藏在封闭的DIV http://jsfiddle.net/dvjkh7xs/

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

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

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

2014-09-03 15:40:59 Jakub

它看起来像一个铬错误。从版本37开始，他们改变了文本渲染引擎，所以这可能是一个错误。在同时添加填充到输入

2014-09-03 15:48:16 jkojoa

我想冒险猜测它也与字体有关。尝试在框中输入“Lj”大写L小写字母j。 'j'的左卷曲也落在'L'的下面。

我只想补充：

text-indent: .2em;

输入框。它会使非'j'字符从左侧略微缩进，但是我怀疑用户会因为输入框中留有一些空白而停止使用您的站点:)

2014-09-03 16:00:45 CodingWithSpike

回答