Ich habe neulich an einem Bug-Ticket gearbeitet, bei dem gemeldet wurde, dass ein Icon in einem Button zu tief saß. Einfach nicht richtig ausgerichtet. Ich musste mich auf eine kleine Reise begeben, um herauszufinden, wie ich ihn reproduzieren kann, bevor ich ihn beheben konnte. Lasst mich die Szene aufbauen.
Hier ist der Screenshot
Aber wenn ich mir den Button auf meinem Rechner ansehe, sieht er perfekt aus
Was zum Teufel, oder? Gleiche Plattform (macOS), gleicher Browser (Firefox), gleiche Version, alles. Andere Leute im Team schauten auch, und es war für sie in Ordnung.
Dann eine Entdeckung! (Danke, Klare.)
Es sah nur auf ihrem Low-Resolution-Externmonitor so aus. Ich weiß nicht, ob "Low" fair ist, aber es ist nicht das "Retina" eines MacBook Pro, was auch immer das ist.
Mein Problem ist, dass ich gar keinen Monitor mehr habe, der nicht hochauflösend ist. Wie kann ich das also testen? Vielleicht kann ich das einfach... nicht? Nein! Ich kann! Schauen Sie mal. Ich kann auf die Firefox-App auf meinem Rechner "Informationen abrufen" und diese Box ankreuzen
Jetzt kann ich den Fehler buchstäblich sehen. Soweit ich das beurteilen kann, ist er einzigartig für Firefox. Vielleicht etwas mit Pixel... Rundung? Ich habe keine Ahnung. Hier ist ein reduzierter Testfall mit dem beteiligten HTML/CSS.
Die Lösung? Anstatt einen inline-block Display-Typ für Buttons zu verwenden, sind wir zu inline-flex gewechselt, was sich wie der richtige Display-Typ für Buttons anfühlt, da Flexbox hervorragend zum Zentrieren geeignet ist.
.button {
/* a million things so that all buttons are perfect and... */
display: inline-flex;
align-items: center;
}
Sie könnten wahrscheinlich einfach die Seitenansicht in Firefox auf etwa 50% ändern. Oder vorübergehend das gesamte Betriebssystem (wenn macOS das unterstützt) auf 100% Zoom anstelle von 200% oder was auch immer standardmäßig auf HiDPI-Displays eingestellt ist, umschalten.
inline-flexoderinline-gridmit dergap-Eigenschaft sind ebenfalls eine gute Möglichkeit, Buttons mit Icons zu handhaben, da Sie sich keine Gedanken darüber machen müssen, wo sich das Icon befindet (vor oder nach dem Text) und die Abstände und die vertikale Ausrichtung einfach funktionieren.Ich hatte auch diesen Fehler, aber nicht bei niedriger Auflösung. Also habe ich Folgendes verwendet:
.button {display: inline-flex;
align-items: center;
}
Danke für den Beitrag :D
ja, ich auch
Ich habe den Testfall geladen und war überrascht, dass es in Chrome eine vertikale Fehlausrichtung gab: Der Text war nicht zentriert. Zuerst habe ich mit der Anzeige und der internen Größe des Buttons herumgespielt, aber das hat nicht funktioniert. Das Einpacken des Textes in verschiedene Tags und das Anpassen des CSS für den Wrapper funktionierte auch nicht. Dann habe ich den Text in Großbuchstaben geändert, falls Abstiege die Ursache waren. Selbst mit Großbuchstaben war er immer noch zu hoch im Button. Ich habe das SVG entfernt, den Text in gemischter und Großbuchstaben getestet, und er war immer noch fehlausgerichtet. Ich habe die Schriftart auf Arial und dann auf Verdana eingestellt, und das hat das Problem behoben, unabhängig davon, ob das SVG vorhanden war oder nicht. Die Wahl der Schriftart oder zumindest die Art und Weise, wie Schriftarten von einem Computer zum nächsten angezeigt werden, macht also einen Unterschied.
Ich hatte nicht damit gerechnet, dass display: inline-flex eine Sache ist, bis vor kurzem.
Dieser Artikel, wenn korrekt, besagt, dass display: inline-flex; keine Auswirkungen auf die Kinder innerhalb des Buttons haben sollte und nur dazu dient, das Elternelement als inline anzuzeigen
https://stackoverflow.com/questions/27418104/whats-the-difference-between-displayinline-flex-and-displayflex#27459133
Warum hat es deiner Meinung nach in deinem Fall funktioniert?
In meinem Fall hat es funktioniert, weil es sehr wohl "Auswirkungen auf die Kinder innerhalb des Buttons" hatte. Aber ich ging von einem Nicht-Flex-Container (inline-block) zu einem Flex-Container (inline-flex) über.
Ich habe das bei mehreren Buttons bemerkt, bei denen ich Icons verwendet habe, und ich habe nie verstanden, warum... Jetzt weiß ich es, da ich mein Entwicklungsfenster immer auf meinem MacBook Pro habe und auf einem externen Monitor vorschau. Ich habe festgestellt, dass das Klicken auf stilisierte Eingabefelder diese auf externen Monitoren langsamer macht. Sobald Sie das Fenster auf den primären Monitor verschieben, verhalten sie sich ordnungsgemäß.
Übrigens, dein Logo-Effekt ist super! Wenn ich nach oben scrolle, bekomme ich jedes Mal einen Schreck. Wie das Klingeln eines Aufzugs, wenn man die Etage erreicht hat. Tolles Detail!
Ich bin auf dasselbe Problem gestoßen und habe festgestellt, dass es auch von der verwendeten Schriftart abhing. Ich konnte nicht zu einer anderen Schriftart wechseln, also habe ich am Ende eine
max-resolutionMedia Query verwendet, um einen Rand hinzuzufügen, der meinen Text auf Low-Resolution-Bildschirmen ausrichtet.Jedes Mal, wenn ich mich mit Font-Rendering-Spielereien beschäftige, wächst mir ein graues Haar.