Firefox und Safari zeigen unterschiedliche Schaltflächenstile
Ich habe auf meiner Website eine CSS-Schaltfläche erstellt und das Design über Google Chrome überprüft.
Ich habe folgende Designs verwendet:
.btn-kabumm {
background-color: #87cbac;
color: #fff;
border-color: #87cbac;
}
.btn-lg {
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
In Safari und FF erhält die Schaltfläche jedoch einen seltsamen zusätzlichen Rand.
Chrom:
Firefox / Safari:
Ich bin mir allerdings nicht ganz sicher, wie ich das loswerden soll.
Dies liegt daran, dass Sie vergessen haben, Ihrer Schaltfläche die Bootstrap-Stammklasse btnzuzuweisen, die alle Schaltflächen haben sollen. Weitere Informationen finden Sie in der Dokumentation zu den Bootstrap-Schaltflächen hier
Z.B:
<input id="nf-field-9" value="Absenden" class="ninja-forms-field btn btn-kabumm btn-lg btn-rounded nf-element" type="button">
ist wie es sein sollte, aber du hattest
<input id="nf-field-9" value="Absenden" class="ninja-forms-field btn-kabumm btn-lg btn-rounded nf-element" type="button">
Vergleichen Sie den Code mit der Schaltfläche in Ihrem Karussell, und Sie werden sehen, dass dies der Unterschied zwischen den beiden ist
Das Hinzufügen der richtigen Klasse führt dazu:
Screenshot von Firefox v58.0b3 (64-Bit) unter Linux :)