MDL - Textfeld zeigt die untere Zeile in der Mitte

Question

Die untere Zeile für Text-Feld ist ein wenig darüber angezeigt. Kein CSS verwendet ...

<div class="mdl-textfield mdl-js-textfield"> 
    <input class="mdl-textfield__input" type="text" pattern="[0-9]*" id="phone"> 
    <label class="mdl-textfield__label" for="phone">Phone</label> 
    <span class="mdl-textfield__error">Digits only</span> 
</div> 

<form action="#"> 
    <div class="mdl-textfield mdl-js-textfield"> 

    <input class="mdl-textfield__input" type="text" id="demo-input" /> 

    <label class="mdl-textfield__label" for="demo-input">UserName...</label> 
    </div> 
</form> 

Take a look at what I got

Answer 1

Werfen Sie einen Blick auf die Antwort, die ich für die unten Stackoverflow Thread gepostet.

Material Design Lite - Bottom Line in text field has a slight gap with colored line