border-radius in den Chrome-bug?

Ich habe ein problem mit dem border-radius " in Chrom
das ist mein code:

img{
border-radius: 24px;
border: 2px solid #c7c7c7;                 
-moz-border-radius:24px; 
-webkit-border-radius: 24px;
}

Auf mozzila funktioniert es, aber in chrome, es sieht komisch aus...
Auf mozzila können, sehe ich einen Kreis grenzt an mein Bild, aber auf chrome den Kreis schneidet die Ränder und alles, was ich sehen kann, sind gerade Linie

einen screenshot: http://postimage.org/image/27turq0mc/

können Sie helfen?

können Sie ein Beispiel geben jsfiddle.net/sandeep/Q55C8/5
Ich kann nicht sehen, das Bild...

InformationsquelleAutor Dorel | 2011-10-12

  1. 6

    dies ist wohl ein chrome-bug. Eine Lösung könnte sein, wickeln Sie die img mit einem div, und geben Sie folgende css:

    img{                
    -moz-border-radius:24px; 
    -webkit-border-radius: 24px;
    border-radius: 24px;
    display:block;
}
div {
    border: 2px solid #c7c7c7; 
    border-radius: 24px;
    -webkit-border-radius: 24px;
    width:40px; /* the width of image */
    height:40px; /* the height of image */
}

    Demo: http://jsfiddle.net/EnmMp/1/

    InformationsquelleAutor Sotiris

  2. 2

    Ich hatte das gleiche problem und die Lösung bereitgestellt durch:

    http://webdesignerwall.com/tutorials/css3-rounded-image-with-jquery

    das problem behoben.

    Zuerst zeigt die Lösung mit nur CSS3 & HTML-und dann stellt es die Lösung mit JQuery.

    InformationsquelleAutor Vinicius José Latorre

  3. 1

    Versuchen, es zu tun auf einem hintergrund-Bild statt auf eine html-img-element, wie einige img-Elemente funktionieren nicht mit border-radius (aber ich gueass).

    div.something{
background-image:url(something.png);
border-radius: 24px;
border: 2px solid #c7c7c7;
border-radius: 24px;
}
    meine Bilder entstehen durch eine php-Funktion... und ich habe die Arbeit an der img als es ist...
    dann haben Sie ein problem, wie die Grenze ist nicht alowed, schneiden Sie ein Bild-element, aber Sie könnten versuchen, um dynamicaly Sie den hintergrund mit php, und da ich kein php-Mann, hier ist ein link drupal.org/node/98246
    Mit einem hintergrund-Bild und nicht ist nicht ein workaround für dieses Problem. Der bug immer noch Auftritt.

    InformationsquelleAutor Thomas Andreè Lian

  4. 1

    statt einfach den folgenden code für die Grenze

    -moz-border-radius: 2px 2px 15px 15px;

    Für den radius angewendet werden im Uhrzeigersinn, beginnend von der oberen linken, können Sie nicht tun, dass für Webkit-im moment. So haben Sie zu schreiben Sie es auf lange hand wie:

    -webkit-border-top-left-radius: 2px;
-webkit-border-top-right-radius: 2px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;

    InformationsquelleAutor user2716666

Schreibe einen Kommentar