Firefox ne rendant pas correctement: border-radius, box-shadow et la frontière

Question

Dans l'exemple ci-dessous:

http://jsfiddle.net/Du8f6/3/

réglage Im ombre intérieure à la frontière du récipient et 10px avec rayon de frontière fixé à 50% . Le résultat est une fine bordure blanche à l'extérieur de la bordure du conteneur.

La mince bordure blanche est visible dans:

mozilla firefox 
ie 11 

et sa non visible dans:

opera 
safari 
chrome 

des suggestions pour la fixation de ce sont les bienvenus.

Answer 1

C'est parce que la bordure est rendue: peinte sur la div. C'est un autre problème "demi-pixel" et la couleur de la bordure se mélange avec la couleur de fond div ... Jetez un oeil à Border-radius: 50% not producing perfect circles in Chrome ou IE11 draws small line between positioned elements. Ce ne sont pas les mêmes problèmes, mais ils ont la même origine.

probablement votre solution plus facile est de sauter la largeur de la bordure de la div et mettre en place une frontière « faux » en utilisant l'arrière-plan d'une nouvelle enveloppe div:

Dans votre code html:

<div class="fakeborder"><div class="sub">Hm</div></div> 

et dans votre css:

.sub { 
    ... 
    border: 0px solid black; 
    ... 
} 

.fakeborder{ 
    margin:0; 
    padding:10px;  /*The fake border width*/ 
    background:black; /*The fake border color*/ 
} 

Answer 2

J'ai eu un problème similaire. Même si je mets

box-shadow:0 0 0 rgba(0,0,0,0); 

à l'élément juste parce que je ne voulais pas une boîte ombre pour cet élément et je pensais que je pouvais passer outre la propriété comme celui-ci.

Cela fonctionnait dans les navigateurs Webkit, mais FF restait en train de rendre une ombre mince.

Une meilleure solution et la meilleure pratique pour passer outre une propriété CSS à sa valeur par défaut, il est réglé de toute évidence à sa valeur par défaut (stupide!)

box-shadow: none