Eingabe Text Höhe ist in Safari gebrochen

Question

Ich bin auf der Suche nach einer Texteingabe, wo der Text füllt das gesamte Eingabefeld vertikal. Wie im Bild unten dargestellt:

Dies funktioniert in Firefox und Chrome alles in Ordnung.

In Safari Ich sehe dieses Problem:

Es ist wie die line-height scheint nicht richtig für das Eingabefeld angelegt. Lustig genug wird es richtig für den Platzhalter angewendet.

Mein Code:

Html:

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

Css: https://jsfiddle.net/0xsven/16z9Lr6t/

Ist das ein Bug oder bin:

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

Sie meinen Code mit diesem Link testen Ich vermisse etwas?

Edit: Ich bin auf Mac OS mit Safari 10.0.2

Answer 1

Dies ist meine Lösung:

<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; 
} 

Live-jsFiddle - https://jsfiddle.net/16z9Lr6t/3/

Answer 2

nicht line-height Eigenschaft in jeder Line-Level-Tags verwenden Sie; gilt nur für Tags auf Blockebene.

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

Answer 3

line-height gibt nur Grenzen des Textes, nicht unbedingt die Textplatzierung in diesem Feld.

Versuchen Sie die Einstellung vertical-align: middle (oder einen anderen Wert, kann derzeit nicht getestet werden).