Chrome inkonsistent Renderelemente mit Offset
Ich arbeitete auf einer Website und nutzte himmlische Medienfragen, um die Website ansprechbar zu machen.
Aber ich erlebe sehr seltsame Fehler in Chrome, bei denen Elemente an den falschen Positionen gerendert werden (es sieht so aus, als würde es mehrere Elemente auf der Seite nach rechts ausrichten).
Ich werde einen Screenshot der falschen Ausrichtung anhängen. Wie Sie sehen können, geht der Text in der oberen Leiste über die Zeilen hinaus. In der Mitte ist jedes Element, das normalerweise zentriert ist, nach rechts versetzt. Auch in der unteren Leiste werden Textelemente angezeigt, die normalerweise nebeneinander liegen.
Um die Website online zu sehen Ссылка . Das Seltsame ist, dass Chrome es manchmal falsch macht, aber viel Zeit zeigt es richtig. Es kann weggehen, indem Sie das Fenster ziehen, aber ein effektiverer Ansatz besteht darin, den Browser zu beenden und neu zu starten.
Weiß jemand, warum Chrome dieses Problem hat und was es in meinem CSS verursacht?
Was ich versucht habe:
- Überprüfen Sie die Prüfung in den Chrome-Entwicklertools
- Ändern Sie Stilvariablen im Inspector
- Cache deaktivieren
- JavaScript deaktivieren
AKTUALISIEREN
Ich verbringe etwas Zeit damit, das CSS zu debuggen. Css zeilenweise hinzugefügt und das Root-Problem kann nicht gefunden werden. Was ich bei allen Elementen bemerkt habe, die falsch ausgerichtet sind, ist, dass die Breite von Webkit-Browsern nicht korrekt berechnet wird. Ich hoffe, das zusätzliche Bild kann darauf hinweisen. (vor allem wenn Sie den Mauszeiger über den Text bewegen, sollte er beim Schweben lila werden. Wie Sie sehen können, ist er bis zu einer gewissen Breite violett.
UPDATE 2 Um bei deaktiviertem Javascript klar zu sein, tritt das Problem immer noch auf. Ich habe versucht, einen einfachen Testfall für dieses Problem zu machen, aber weil das Problem so inkonsistent ist, kann ich es nicht auf einen einfachen CSS-Block nageln.
Ich verwende Chrome 31.0.1650.57 unter Windows 8.1. Einer meiner Kunden verwendet Windows 7 in Kombination mit 31.0.1650.57.
UPDATE 3
Ich habe ein Video live gesehen, das die Verrücktheit des Problems zeigen kann. Sie können sehen, wenn ich das erste Mal öffne Chrom ist es richtig, als ich schließe und öffne es wieder und alles ist falsch ausgerichtet. Wenn ich dann das Element inspiziere, springt alles auf die richtige Position (es tut dies nicht immer
UPDATE 4 @SetSailMedia hat Recht, war die Verwendung einer SVG-Schriftart in Chrome. Was komisch ist, ist, dass ich diese Schriftart in einigen anderen Websites verwendet habe und dieses Problem nie gesehen habe. Ich wechselte zurück, um die Schriftart von Googles Webfonts anstelle meiner eigenen gehosteten Schriftart zu laden. Dadurch wird die Schriftart wieder hässlich, aber es ist eine bessere Lösung als die Fehlausrichtung von Elementen.
2 Antworten
Es scheint, dass Svg-Schriftarten ein Problem in Chrome haben. Wie von commenter @ Wesabi in dieser Google-Gruppe . Ich habe Ihren Link getestet und die Schriftart in eine Nicht-SVG-Schriftart geändert und es scheint zu funktionieren.
Was Ihre Inkonsistenz in den Sitzungen verursacht hat, ist, dass die Schriftart manchmal vor der Berechnung der Elemente geladen wird und manchmal, abhängig davon, in welcher Reihenfolge die Anforderungen erfüllt werden.
Die beste Lösung wäre die Verwendung von Google Webfonts, selbst wenn die Schriftart in Chrome mit Anti-Aliasing versehen ist. Stattdessen wird standardmäßig ein anderer Schriftarttyp verwendet.
Chrome hat außerdem Probleme beim Rendern von SVG-Schriftarten in ausgewählten Feldern. Um den ursprünglichen Fragen- und Fehlerbericht zu sehen.
Sie können versuchen, CSS Reset von Eric Meyer zu verwenden, wodurch alle Inkonsistenzen zwischen verschiedenen Browser-Renderings beseitigt werden. Hier ist der Code unten:
%Vor%Tags und Links html css html5 google-chrome css3