border-radius fällt unter safari (hässliche clipping)

Weiß jemand einen workaround für den folgenden " bug " in Safari?

Wenn ich border-radius zu erstellen, gerundeten Grenzen in CSS3 ist es genauso gut funktioniert auf Safari, FF und so weiter.

Aber wenn der border-color wird die Farbe wie im hintergrund sieht man den Container hintergrund überlappung der Grenze.

Versuchen kann man es hier: http://de.roundedcorner.org/css3-rounded-corner-generator setzen Sie Einfach die border-Farbe und hintergrund-sites zu #333333

Vielen Dank für Ihre Hilfe!

InformationsquelleAutor Gundon | 2011-03-06
  1. 14

    Das ist wahrscheinlich wegen background clipping.

    Den folgenden sollte korrigieren.

    -moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;

    Etwas mehr auf den hintergrund-clip, schauen Sie hier:
    https://developer.mozilla.org/en/CSS/background-clip

    • Als weitere Anmerkung möchte ich hinzufügen, dass mit diesem clipping-option kann die Ursache für ein ähnliches Problem auftreten, in dem element, zwischen der Grenze und der hintergrund. Spaß! 🙂
    • Ich bin mit einer abgerundeten Ecke clipping-problem auch - ich bin mir nicht sicher, wenn es fällt unter den selben Auftrag, aber der hintergrund, clipping ist nicht zu fixieren. Es bezieht sich auf ein 'halo' der Farbe: jsfiddle.net/jSRND Irgendwelche Ideen? Wenn es nicht das gleiche Problem, werde einen neuen thread starten.
    • Gefunden einen fix für das auch, mit freundlicher Genehmigung von @neil_pie auf Twitter: jsfiddle.net/dwYCg/8
    • Vielen Dank du hast mich gerettet +1 🙂
    InformationsquelleAutor Quiche_on_a_leash
  2. 2

    Hintergrund-clip-Eigenschaft wird verwendet, um zu bestimmen, ob der hintergrund erstreckt sich in der Grenze oder nicht. Der default ist border-box, das heißt, er will hinein, aber wenn Sie es so einrichten, padding-box, gibt es nicht. wenn Sie content-Feld der hintergrund erstreckt sich nur auf den content-Bereich. (Quelle: http://www.css3.info/preview/background-origin-and-background-clip/)

    Lösung für Ihr problem ist die Verwendung:
    -webkit-background-clip: padding-box;

    Es ist wichtig zu beachten, dass bei Verwendung der Kurznotation an die anderen background-Eigenschaften dann sollte Hinzugefügt werden, nachdem diese. Es scheint, dass die Kurznotation impliziert eine Standard-clip Wert überschreibt einen zuvor gesetzten. (Quelle: http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed)

    InformationsquelleAutor Pavot
Schreibe einen Kommentar