Ich finde, die Schaltfläche zum Antworten hat die richtige Größe, aber die Schaltflächen auf der linken Seite nicht.
Im Gegensatz zu den anderen Schaltflächen im Bereich .topic-footer-main-buttons ist die Schaltfläche für Benachrichtigungen in ein div (.topic-notifications-button) eingeschlossen.
Alle Schaltflächen in diesem Bereich, einschließlich der Antwortschaltfläche (vereinfachter Code):
<button></button>
Benachrichtigungsschaltfläche (vereinfachter Code):
<div class="topic-notifications-button">
<button></button>
</div>
Das Problem ist, dass aufgrund dieser Zeile,
Die Eigenschaft font-size: var(--font-up-1) sowohl auf die Benachrichtigungsschaltflächen-Umrandung als auch auf die darin enthaltene Schaltfläche angewendet wird.
Wie Sie wissen, multiplizieren sich em-Werte schrittweise von Eltern zu Kind.
Das Ergebnis kann wie folgt veranschaulicht werden:
<div class="topic-notifications-button" style="font-size: 1.15em;">
<button style="font-size: 1.15em;"></button>
</div>
1,15 × 1,15 ist das Problem. Der endgültige Wert von font-size für das <button>-Element der Benachrichtigungsschaltfläche ist größer als erwartet.
Es ist auf den ersten Blick nicht offensichtlich, da die Geschwisterschaltflächen (Schraubenschlüssel, Teilen, Lesezeichen usw.) ihre Höhe an das höchste Element in derselben Zeile anpassen[1]. Daher fällt die Benachrichtigungsschaltfläche nicht als “zu hoch” auf, da alle Schaltflächen in diesem Container die gleiche Höhe haben.
Das Entfernen der hervorgehobenen Zeile in der obigen GitHub-Onebox sollte das Problem beheben:
Dies kann veranschaulicht werden, wenn wir ein paar zusätzliche Schaltflächen in den Container einfügen, damit der Inhalt umgebrochen wird:
Die Schaltflächen in der ersten Zeile erhalten alle die erwartete Höhe.
Die Benachrichtigungsschaltfläche, die aufgrund derem-Multiplikation größer als erwartet ist, bewirkt jedoch, dass die benachbarte Schaltfläche in derselben Zeile automatisch an Höhe gewinnt. ↩︎
