Le rembourrage de jQuery modifie la largeur d'un élément

Question

J'ai un site Web qui a quelques boutons sur la page d'accueil: http://www.bniolsztyn.pl (en polonais, désolé).

Il y a quelques boutons bleus avec le balisage suivant:

<div class='more-link'> 
    <a href='#'>Read more...</a> 
</div> 

Leur style est:

div.more-link a { 
    padding: 8px 20px; 
    color: #d0d0d0; 
} 
div.more-link { 
    width: 100%; 
    height: 12px; 
    padding: 6px 0; 
    margin: 4px 0; 
    text-align: center; 
    background: url(/sites/all/themes/bni/img/button.png) center repeat-x; 
    background-color: #1a3754; 
    background: -moz-linear-gradient(top,#5190cf 0%,#27527e 48%,#1a3754 52%,#234a71 100%); 
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#5190cf),color-stop(48%,#27527e),color-stop(52%,#1a3754),color-stop(100%,#234a71)); 
    background: linear-gradient(top,#5190cf 0%,#27527e 48%,#1a3754 52%,#234a71 100%); 
    border: 1px solid #5190cf; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    -webkit-box-shadow: 0 0 0 1px #244e76, 0 3px 3px rgba(0,0,0,.5); 
    -moz-box-shadow: 0 0 0 1px #244e76, 0 3px 3px rgba(0,0,0,.5); 
    box-shadow: 0 0 0 1px #244e76, 0 3px 3px rgba(0,0,0,.5); 
} 

La balise <a> intérieure a un rembourrage 20px fixe des deux côtés:

En utilisant jQuery, Je fais occuper toute la div parent:

Le code jQuery est la suivante:

$(document).ready(function(){ 
    $('div.more-link a').each(function(){ 
     var container = $(this).parent().width(); 
     var link = $(this).width(); 
     var pad = Math.floor((container - link)/2); 
     $(this).css({ 
      paddingLeft: pad + 'px', 
      paddingRight: pad + 'px' 
     }); 
    }); 
}); 

Maintenant, tout fonctionne très bien dans Firefox, Opera et Internet Explorer. Cependant, Chrome semble réagir au code jQuery d'une façon particulière: il réduit la largeur des <a> balises et, en conséquence, le déplacement du texte du bouton à droite:

Au début, je pensé qu'il s'agissait d'un numéro box-sizing, mais il ne semble pas être ainsi. Désactiver le remplissage en ligne ajouté par jQuery ramène la largeur de l'élément à la normale (les deux valeurs de remplissage gauche et droite doivent être définies afin de voir le quirk). J'utilise Chrome 8.0.552.215 et jQuery 1.4.4.

Est-ce un problème connu avec Chrome ou est-ce un "What a Terrible Failure" de mon côté? Y at-il quelque chose de mal avec le code? Pouvez-vous reproduire l'erreur?

Answer 1

Je ne suis pas convaincu que vous ayez besoin de JQuery pour le faire. Essayez-vous simplement de centrer le texte <a> dans le conteneur "bouton" <div>? Si oui, vous pouvez le faire avec CSS:

div.more-link a { 
    color: #d0d0d0; 
    display:block; 
    line-height: 24px; 
} 
div.more-link { 
    width: 100%; 
    height: 24px; 
    margin: 4px 0; 
    text-align: center; 
    background: url(/sites/all/themes/bni/img/button.png) center repeat-x; 
    background-color: #1a3754; 
    background: -moz-linear-gradient(top,#5190cf 0%,#27527e 48%,#1a3754 52%,#234a71 100%); 
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#5190cf),color-stop(48%,#27527e),color-stop(52%,#1a3754),color-stop(100%,#234a71)); 
    background: linear-gradient(top,#5190cf 0%,#27527e 48%,#1a3754 52%,#234a71 100%); 
    border: 1px solid #5190cf; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    -webkit-box-shadow: 0 0 0 1px #244e76, 0 3px 3px rgba(0,0,0,.5); 
    -moz-box-shadow: 0 0 0 1px #244e76, 0 3px 3px rgba(0,0,0,.5); 
    box-shadow: 0 0 0 1px #244e76, 0 3px 3px rgba(0,0,0,.5); 
} 

Avis Je retire simplement le rembourrage des deux éléments, ajusté la hauteur de la div, et a ajouté display:block; et line-height:24px; au <a>.

EDIT: Pour être clair, le code ci-dessus rendra tout le "bouton" cliquable.