Se débarrasser du pixel blanc autour des boutons customisés sur IE 7
button, input ou a) en lui appliquant une image de fond répétée horizontalement et une bordure, ça a de la gueule. À part peut-être sur Internet Explorer 7 qui, ne nous demandons même plus pourquoi, vient ajouter une bordure supplémentaire d'un pixel blanc (dans la majorité des cas, cf. infra) entre le bouton en lui-même et sa bordure normale, définie par nos soins. Le plus fort, c'est que si l'on enlêve cette dernière, ce maudit pixel en trop disparaît !Plutôt que de chercher midi à quatorze heures, commençons par styler normalement notre bouton, pour les navigateurs capables de comprendre le CSS correctement :
.button {
background: url("img/button.jpg") repeat-x;
border: 1px solid #3B3B3B;
}Si nous laissons les choses en l'état, IE 7 va en réalité appliquer une bordure supplémentaire d'un pixel de large, de la couleur de fond de l'élément (le bouton), qui est, par défaut, le blanc. Il est impossible de la faire disparaître sans enlever la bordure originelle. Alors, réfléchissons...
/* Ceci s'applique uniquement à IE 7, via un commentaire conditionnel */
.button {
border: 1px solid transparent; /* on laisse une bordure invisible pour que le pixel en trop reste */
background-color: #3B3B3B; /* on donne à ce pixel la couleur souhaitée pour notre bordure */
}