Eingang folgt nicht Linie-Höhe-Eigenschaft

Question

Ich habe derzeit ein Problem mit der line-height Eigenschaft. Derzeit verwende ich dies, um den Text unter die Mitte (~ 2/3 des Weges nach unten div) zu erscheinen.

.squ { 
 
    height: 30vw; 
 
    width: 40vw; 
 
    background: gray; 
 
    display: inline-block; 
 
    margin: 5px; 
 
    position: relative; 
 
} 
 
.jbcol3 { 
 
    text-align: center; 
 
    height: auto; 
 
} 
 
.squ input, 
 
.squ a { 
 
    display: inline-block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    line-height: 40vw; 
 
}

<div class="jbcol3"> 
 
    <!--Start Grey Box--> 
 
    <br /> 
 
    <h3>Account Actions</h3> 
 

 
    <div id=""> 
 
    <p class="squ"> 
 
     <input type="submit" value="Make Payment" id="" /> 
 
    </p> 
 
    </div> 
 
    <p class="squ"> 
 
    <input type="submit" value="Get Quote" id="" /> 
 
    </p> 
 
    <p class="squ"> <a id="" href="orderhistory.aspx">Order history</a> 
 
    </p> 
 
    <p class="squ"> <a id="" href="changepassword.aspx">Change password</a> 
 
    </p> 
 
</div>

Wie Sie aus dem Snippet sehen können, bin ich mit Positionierung und inline-block Elemente, um diese Art von Ergebnis zu erzielen.

jedoch die

<input type="submit"/> 

scheint nicht auf die Eigenschaft line-height einzuhalten.

Ist das von Entwurf, dass die Schaltfläche seine Zeilenhöhe nicht ändert, obwohl es überschrieben werden sollte?

---

Ich habe das background-transparent Einstellung gefunden, diese Einschränkung scheint zu 'entfernen' - und meine Frage daher:

Arbeits Demo:

.squ{ 
 
    height:30vw; 
 
    width:40vw; 
 
    background:gray; 
 
    display:inline-block; 
 
    margin:5px; 
 
    position:relative; 
 
} 
 

 
.jbcol3{ 
 
    text-align:center; 
 
    height:auto; 
 
} 
 

 
.squ input, .squ a{ 
 
    display:inline-block; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    height:100%; 
 
    width:100%; 
 
    line-height:40vw; 
 
    background:transparent; 
 
}

<div class="jbcol3"> 
 
    <!--Start Grey Box--> 
 
    <br /> 
 
    <h3>Account Actions</h3> 
 

 
    <div id=""> 
 
     <p class="squ"> 
 
      <input type="submit" value="Make Payment" id=""/> 
 
     </p> 
 
    </div> 
 
    <p class="squ"> 
 
     <input type="submit" value="Get Quote" id="" /> 
 
    </p> 
 
    <p class="squ"> <a id="" href="orderhistory.aspx">Order history</a> 
 
    </p> 
 
     <p class="squ"> <a id="" href="changepassword.aspx">Change password</a> 
 
    </p> 
 
</div>

---

Es ist auch gewesen bemerkte, dass die Einstellung -webkit-appearance: none; auch dieses Verhalten entfernen wird - also würde es vorschlagen, dass dies das Standardverhalten ist, in dem Sie andere Eigenschaften überschreiben müssen, damit dies angezeigt wird?

---

Warum ist es, dass eine Hintergrundfarbe Einstellung der Taste können diese Zeilenhöhe zu benutzen? Warum funktioniert das nicht automatisch?

Answer 1

Nicht sicher, ob dies Ihre Frage von beantworten wird, warum es geschieht.

Aber nach ein wenig und schnelle Untersuchung habe ich einige Ergebnisse gefunden. Wenn der Eingang den Typ submit hat, erhält er -webkit-appearance: push-button. Und die line-height ist gezwungen, normal. Und wenn ich gezwungen sage, ist es wirklich gezwungen, normal.

In den berechnet Arten Sie erhalten:

line-height: normal; 
.squ button, .squ input, .squ a - 40vw!important 
input[type="submit"] - 40vw!important 
input, textarea, keygen, select, button - normal user agent stylesheet 

Auch wenn ich es mit 40vw!important bin überschreiben es als normal macht. Ich habe es sogar mit 40px!important versucht. normal bezieht sich auf die font-size .. so versuchte ich, das durch Ändern der font-size zu decken und nichts passieren würde.

Jetzt, wenn wir die -webkit-appearance: push-button durch Überschreiben mit none entfernen, verliert es die erzwungene line-height: normal.

Aber was passiert, wenn Sie die background-color ändern? Der Browser platziert standardmäßig -webkit-appearance mit none, so dass Sie die line-height überschreiben können.

Die line-height wird vom Browser in der push-button Darstellung erzwungen. Also, versuchen Sie es mit einem button Tag stattdessen.

<button type="submit">Make Payment</button> 

Was bekommen wir?

-webkit-appearance: button; 
line-height: 334.799987792969px; 

Schlussfolgerungen:

• -webkit-appearance: push-button macht der Browser die line-height: normal
  erzwingen.
• -webkit-appearance: button ermöglicht das Bearbeiten der line-height.
• background-color Sätze -webkit-appearance zu none

Sie wissen nicht, ob es die Antwort ist man wollte, aber ich denke, diese Ergebnisse sehr interessant sind.