Zusätzlicher Platz zum letzten blockierten Element in Chrome
Ich bin auf ein kleines Problem gestoßen, das anscheinend nur in Chrome auftritt (getestet und OK in IE10 und FF 31).
Im angegebenen Beispiel gibt es #message und #link , beide sind auf display: inline-block; gesetzt, so dass sie vertikal zueinander ausgerichtet werden können (der Text in #message könnte in der Länge stark variieren) .
text-align: justify; wurde auf #container gesetzt, um sicherzustellen, dass #message nach links und #link nach rechts ausgerichtet ist.
Das Problem ist, dass bei bestimmten Fenstergrößen ein kleiner "Abstand" rechts von #link erscheint.
Das Problem:
Wie es aussehen sollte:
Was ich eigentlich erreichen möchte:
Wenn Sie die Geige sehen und das Problem nicht sehen können, versuchen Sie, die Größe des Fensters zu ändern.
- Was verursacht dieses Problem in Chrome?
- Gibt es eine Möglichkeit, das zu beheben, ohne auf die Verwendung von Floats zurückzugreifen (ich möchte die vertikale Ausrichtung beibehalten)?
JS Geige:
HTML:
%Vor%CSS:
%Vor%9 Antworten
Dieser Fall ist ein perfekter Kandidat für die Verwendung des Flexbox-Layouts. Sie können Ihren bestehenden Code beibehalten, aber fügen Sie die folgenden Zeilen hinzu. Dadurch bleibt Ihr ursprünglicher Code als Ersatz für Browser erhalten, die flexbox nicht unterstützen. Da Chrome die aktuelle Flexbox-Syntax bis zur Version 21 unterstützt, sollte dies Ihr Problem sicher beseitigen.
Modifiziertes CSS
%Vor%Sie müssen den Code für eine umfassende Browser-Unterstützung durch den Anbieter vorfixen, aber da Sie sich nur um den Fehler in Chrome sorgen, ist dies nicht unbedingt erforderlich (die Unterstützung ohne Voreinstellung geht auf Version 29 zurück, obwohl Version 27 immer noch .54 enthält) % des globalen Marktanteils, also können Sie -webkit- auf die sichere Seite werfen).
Da Flexbox anfangs etwas verwirrend sein kann, wenn Sie es noch nicht benutzt haben, gibt es einen guten Überblick mit Beispielen bei CSS-Tricks. Ich habe nicht genug Reputationspunkte, um mehr als zwei Links zu posten, sondern nur Google "css tricks flexbox".
Hoffe, das hilft.
Das Problem ist, dass Sie #container ähnlich wie Sie # message formatieren möchten. #Container sollte einfach ein imaginärer Halter / Container von #message, #link, #info sein.
Versuchen Sie, die #container Hintergrundfarbe rot loszuwerden und fügen Sie sie stattdessen zu #message hinzu. Nachdem du das gemacht hast, wirst du einige Padding-Probleme mit deinem Link bekommen (ich habe das Padding: 1em gelöscht). Als Nächstes können Sie die Breite% von # message anpassen, um den Abstand richtig zu erhalten. Sie werden feststellen, dass ich die Breite gelöscht habe: 90% auf Ihrem #Container.
%Vor%EINFACH & amp; BEST HACK - VERSUCHE DEMO
Hinweis: margin = -0.5px und transform = 0.99px wendet keine zusätzliche Marge oder Breite auf Ihre div#container an, und dies erzwingt auch nicht, dass a#link verschoben oder die nächste gedrückt wird Pixel.
Geprüft: Chrome 36 und Safari 5.1.7
%Vor%Es scheint, dass das Problem durch das Abrunden von Fehlern verursacht wird. Die Seite scheint zu funktionieren, d. H. Es gibt keine rote Lücke bei bestimmten Bildschirmbreiten. Sie können testen, indem Sie das Fenster um jeweils ein Pixel verkleinern. Das Erscheinungsbild der roten Lücke scheint eine Funktion der Breite des Containers zu sein.
Hier ist meine Problemumgehung:
Es verwendet ein extra div plus zwei vertikale Ausrichtungstechniken:
- Die Nachricht wird vertikal mit der Technik der gemischten Zeilenhöhe ausgerichtet
- Die Schaltfläche wird vertikal mit der absoluten Positionierung ausgerichtet
Das CSS (überarbeitet am 26.08.2014):
%Vor%Es ist ein bisschen wie ein Hack, aber Rand-rechts hinzufügen: -1px; scheint das Problem für mich zu beheben:
%Vor%Problem ist, dass die Box in allen anderen Browsern um 1 Pixel nach rechts verschoben wird.
Bearbeiten: Einstellung Überlauf: versteckt im Container div kann dies jedoch beheben.
Ich denke, ich könnte einfach die Lösung für Ihr Problem haben. Ich habe mit dem Display herumgespielt: Inline-Block hat mich ziemlich viel gekostet und hin und wieder einige Margin-Probleme in beiden Webkit-Browsern, in meinem Fall meistens Safari. Wie auch immer, für mich besteht der Trick darin, einfach die Schriftgröße des Eltern-Div auf 0 zu setzen und dann reset die Schriftgröße der untergeordneten Divs auf ihre jeweiligen ursprünglichen Schriftgrößen in Pixel zurückzusetzen wohlgemerkt.
%Vor%Modifizierte JS Fiddle:
Tags und Links html css google-chrome