字體在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

回答