在safari中輸入文本高度被破壞

我正在尋找創建一個文本輸入，其中文本垂直填充整個輸入字段。如下圖所示：在safari中輸入文本高度被破壞

這在Firefox和Chrome都很好。

在Safari中我看到了這個問題：

好像線路高度不爲輸入域正確應用。有趣的是，它適用於佔位符正確。

我的代碼：

HTML：

<input type="text" placeholder="ABCD" value="ABCD">

的CSS：

input { 
    padding: 0; 
    margin: 0; 
    border: 0 none; 
    height: 140px; 
    line-height: 140px; 
    width: 600px; 
    font-size: 185px; 
}

您可以通過以下鏈接進行測試我的代碼： https://jsfiddle.net/0xsven/16z9Lr6t/

這是一個錯誤還是我我錯過了什麼？

編輯：我在Mac OS上使用Safari 10.0.2

來源

2017-03-01 Sven

這是我的解決方案：

<div class="text-box"> 
<input type="text" placeholder="ABCD" value=""> 
</div> 
<div class="text-box"> 
<input type="text" placeholder="ABCD" value="ABCD"> 
</div>

CSS

.text-box input { 
    padding: 0; 
    margin: 0; 
    border: 0 none; 
    background: none; 
    font-size: 185px; 
    position: relative; 
    top: -47px; 
} 

.text-box { 
    background:#fff; 
    height: 140px; 
    width: 600px; 
    overflow: hidden; 
}

直播的jsfiddle - https://jsfiddle.net/16z9Lr6t/3/

來源

2017-03-01 11:53:38 grinmax

這有效。謝謝。你會說這是Safari中的錯誤嗎？ – Sven

@Sven Safari不理解'行高'。我認爲這是該瀏覽器的一個功能 – grinmax