-webkit-border-radius ne recadre pas correctement l'image

J'ai 5 navigateurs pour le rendu html codé pages: IE9, Firefox 4.0 et toutes les dernières versions de google Chrome, Safari et Opera. Maintenant dans IE9 et Firefox 4.0 une image est recadrée correctement en utilisant border-radius: et -moz-border-radius: mais ne parvient pas à l'Opéra, Chrome et Safari aide -webkit-border-radius:. Avec l'Opéra de l'image n'est pas rogné à toutes et avec Safari et Chrome, l'image est un peu recadrée mais avec la frontière étant coupés.

.nonTyp{
margin: 15px 15px 15px 15px;
border:4px inset #C1C8DD;
border-radius:25px;
-moz-border-radius:25px;
-webkit-border-radius:25px;
width:200px;
height:200px;

}

Si vous avez l'une des 3 navigateurs mentionnés qui utilisent -webkit-border-radius: veuillez voir les images exemple de ce que j'ai un problème avec:
Les Graphiques De La Page

source d'informationauteur StHelensBull

  1. 4

    Ce que vous pourriez faire est de mettre tous un style qui est sur le <img> tag maintenant, sur le parent <a> plutôt que de l'utiliser comme le conteneur de l'image. Cela, au moins pour moi, est plus logique ainsi. N'oubliez pas de garder float: left sur l'image pour se débarrasser du fantôme de la marge du bas.

  2. 2

    Je pense que c'est parce qu'il est au premier plan, au-dessus de la frontière

    essayez d'utiliser le même code que vous avez ci-dessus, mais dans votre code html:

    <div class="nonTyp" style="background-image:url('image.jpg');"></div>
  3. 1

    Ce qui a probablement à voir avec l'ordre dans lequel la frontière vs rayon clip est appliquée, mais il est très étrange. Une solution est de déplacer le border-radius et définitions relatives à la balise englobante. N'oubliez pas de déclarer display:block il est donc traité comme bloc de niveau sur tous les navigateurs.

  4. 1

    Cela a fonctionné pour moi sur Chrome et Safari.

    Image est au top niveau.

    div.someclass avec rayon de 5px et div.someclass img avec rayon 4px.

    Qui semble faire les coins look plus propre dans Chrome et Safari. 

    .someclass {
  ...
  border: 1px solid #000;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px; 
          border-radius: 5px;
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 
  -webkit-box-shadow: 0px 0px 5px #000; 
     -moz-box-shadow: 0px 0px 5px #000;
          box-shadow: 0px 0px 5px #000; 
}

.someclass img {
  ...
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px; 
          border-radius: 4px;   
}
  5. 0

    Je pense fonctions de dessin que Chrome utilise pour l'image et le lien fonctionne différemment entre les uns des autres. Et qui provoque l'espace vide entre l'image et le lien.

    J'ai partiellement résolu ce bug via la modification de Matjis' jsfiddle code un peu. J'ai déplacé les balises img position à gauche.

    .gallery a img {
...
position:relative;
left: 2px;
}

    Cette solution peut fonctionner que si vous définissez différentes valeurs de rayon pour l'image et le lien.