border-radius ne fonctionne pas sous Chrome? Aucune solution de contournement?

J'ai mis border-radius (et -moz-border-radius pour les anciens navigateurs) de 20px, et j'ai il fonctionne à merveille dans Safari et Firefox. Ensuite, j'ouvre Chrome et c'est en refusant d'accepter la définition de border-radius. Toutes les suggestions pour contourner ce problème dans Chrome?

Voir le codage CSS en action ici: http://jsfiddle.net/MAYea/

Capture d'écran dans Safari:

border-radius ne fonctionne pas sous Chrome? Aucune solution de contournement?

Capture d'écran de google Chrome:

border-radius ne fonctionne pas sous Chrome? Aucune solution de contournement?

Je l'ai juste testé sur Chrome. :before et :after nécessite la border-radius: 20px;

OriginalL'auteur Andy Dwyer | 2012-12-15

  1. 6

    Ce n'est pas que border-radius ne fonctionne pas, c'est que overflow, ne parvient pas à masquer le dépassement de capacité.

    C'est en fait un nouveau bug dans Chrome. J'ai un problème similaire sur mon Doomsday clock même si elle a fonctionné parfaitement dans une version antérieure de Chrome.

    Comme une solution de contournement, vous pouvez spécifier le border-radius sur le contenu des éléments ainsi que le conteneur.

    Chrome est une sorte de nouvelle race de l'IE.
    Très vrai. C'est triste quand presque tous les CSS3 trucs que j'ai été faire des travaux dans IE10, mais pas dans Chrome...
    Oubliez CSS3, c'est toujours beaucoup de pièces de CSS2.1 mauvaise où IE8 obtient droit (bien que pour être juste, IE8 vis dans ses propres moyens trop)...
    Oui, je l'ai. Aussi: texte ombres. Ceux qui ont été extrêmement hideuse dans google Chrome, et je ne pouvais pas l'utiliser pendant les 8 premières versions car il m'a rendu d'affichage du texte (p. ex. en-têtes, pas le corps du texte) illisible. J'ai été d'avis que Microsoft est d'obtenir leur acte ensemble et à le faire assez bien. Cela dit, IE9/IE10 ont encore quelques nouvelles questions qui leur sont propres, par exemple, ils n'implémentent pas l' not mot-clé dans les requêtes de média correctement.
    Hey, avez-vous vu IE10 de techniques de publicité? Semble assez efficace et précis pour moi! Aussi humble, à certains égards. Comme ils sont en reconnaissant qu'ils ont une histoire de merde.

    OriginalL'auteur Niet the Dark Absol

  2. 2

    J'ai eu un problème similaire, il a contribué à ajouter

    z-index: 0; /* or some other value */

    mais aussi

    transform: translateY(0);

    semble que cela permet à certains sortes de rendu (le deviner rien qu'avec la 3d contexte comme nous l'avons parfois de FORCER rendu GPU...)

    la raison pour laquelle cela fonctionne, je ne peut pas expliquer, peut-être quelqu'un d'autre peut le faire?

    J'ai ce problème dès maintenant, avec la dernière version de Chrome v44 sur OS X 10.10.5...et oui, je sais que c'est "fixe" et c'est une vieille question =)...

    EDIT: Trouvé le même correctif dans un autre soi-Question, cochez ici: lien

    OriginalL'auteur exside

  3. 1

    -webkit-border-radius: est ce que vous cherchez, je pense?

    Va l'essayer. Accrochez-vous bien!

    OriginalL'auteur Ryan

  4. 1

    Ajouter le border-radius: 20px; règle CSS à la fois :before et :after

    DÉMO

    OriginalL'auteur bobthyasian

  5. 0
    -webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;


 -webkit-border-radius: for the Chrome

    Si vous avez besoin de l'essayer cette bibliothèque javascript de ici

    Chrome a pris en charge la unprefixed version d'une quantité importante de temps.
    Le problème est que Abid Sonny code...:(

    OriginalL'auteur underscore