Chrome / WebKit erstellt einen durchgehenden Balken bei Verwendung von Hintergrund, Rahmen und oberen / unteren Rändern
Google Chrome verhält sich buggy unter Verwendung von border-Radius, Hintergrundfarbe und oberen und unteren Rändern. Hier ist der Beweis und Code zu reproduzieren:
%Vor%
Der border-right:1px solid transparent; ist ein Trick, der in den Kommentaren vorgeschlagen wurde, der beim Entfernen des unerwünschten mittleren Balkens half, aber wenn Sie die Größe des Fensters / Browsers ändern, wird es wieder angezeigt. Es hat etwas mit der Nähe des Elements zum Rand des Browserfensters zu tun, ich kann es nicht ganz verstehen. Sie müssen die Größe ändern und dann manchmal über das Element fahren.
In der Tat
Videos von meinem Desktop:
Ich habe -webkit- Präfixe für mehrere Eigenschaften ausprobiert und konnte es nicht reparieren.
Ich habe das zuerst gepostet, weil ich eine schnelle Lösung für eine bestimmte Website brauchte, aber jetzt merke ich, dass es auf mehreren Websites auftaucht und ich habe herausgefunden, was das verursacht. Das ist es, was ich bekomme, wenn ich nichts außer Firefox teste. Dies ist wahrscheinlich ein Fehler und ich sollte es melden, aber ich bin immer noch fest in der Notwendigkeit einer Reparatur in der Zwischenzeit.
Die ideale Lösung ist mit CSS, also kann ich ein oder zwei Selektoren in die CSS-Datei für den Fix schreiben, anstatt Loads-Template-Dateien zu durchsuchen und in der Datenbank div-wrap- oder andere Markup-Fixes anzuwenden. Kennt jemand irgendwelche Tricks, um diesen Fehler loszuwerden?
3 Antworten
Als ich diese Frage untersuchte, gab es immer noch ein Problem auf der Website , das sichtbar ist, wenn die Größe des Browsers horizontal geändert wurde Scrollen auf dem Dokument:
Die "Lösung", die ich verwendete, war, beide anzuwenden
%Vor% to #header mit den Entwicklertools - dies scheint das Problem unabhängig von der Größenanpassung zu beseitigen, zumindest bei einem Mac Chrome 18.
Das scheint mir ein fehlerhaftes Verhalten zu sein - ich würde spekulieren, dass es etwas damit zu tun hat, Ecken zu überschneiden, wo sich Farben schneiden, die aufgrund eines Fehlers in das Element selbst auslaufen.
Ich habe versucht, ziemlich ergebnislos in die mögliche Verbindung zwischen einem Grenzradius zu suchen, der höher ist als die Grenzbreite, die dieses Verhalten verursacht. Das war natürlich unwahr - das Herumspielen mit verschiedenen x- / y-Radien brachte keine Ergebnisse ohne die "Lösung" von oben angewendet. Gut zu wissen, denke ich.
Ich habe noch nie ein solches Verhalten in Chrome gesehen, wirklich sehr fehlerhaft.
Wie auch immer, Sie können Rand-Boden loswerden und es wird gut funktionieren. Wenn möglich, fügen Sie einfach einen <div> mit Hintergrund rot am unteren Rand hinzu. Etwas wie das:
Oder eine CSS-Lösung, fügen Sie Inhalt nach Ihrem div hinzu:
Tags und Links css google-chrome css3 webkit