lien css de l'élément de sauts sur le vol stationnaire

Je suis en train d'essayer de mettre un cadre autour d'un lien sur le vol stationnaire, et le style s'applique à elle, mais il saute (l'élément sauts) quand j'planer sur elle... que puis-je faire?
code:

  .navigation li:hover {
   border: 1px solid #ccc;
 }
Il saute en raison de l'ajout de la frontière. À gauche à partir d'éléments apparaît à gauche-frontière et des éléments va vers la droite de 1 px

OriginalL'auteur dana | 2011-04-07

  1. 14

    Vous "sauter" est causée par la 1px de hauteur de la frontière, que faire de votre li déplacer

    Vous pouvez utiliser 

     .navigation li:hover {
   border-color: #ccc;
 }

 .navigation li {
   border: 1px solid #<parentBackgroundColor/transparent>;
 }

    à la place. De cette façon, la frontière est ici depuis le début, donc pas de sauter sur le vol stationnaire, et il est invisible, car il est de la même couleur que le conteneur parent ou transparent.

    +1 pour la solution - mais une légère modification sur la réponse - définir la frontière .navigation li comme suggéré par @Clement Harreman, mais dans .navigation li:hover, seul changement à la frontière de la couleur. C'sida héritage un peu.
    D'accord, modifier fait.

    OriginalL'auteur Clement Herreman

  2. 8
    .navigation li {
    border: 1px solid transparent;
}

    Vous pouvez ajouter un transparent border lorsque vous n'êtes pas en vol stationnaire, alors il ne saute pas.

    Ou, vous pouvez supprimer un total de 2px verticale padding autour de l'élément, par exemple:

    .navigation li {
    padding: 10px
}
.navigation li:hover {
    padding: 9px;
    border: 1px solid #ccc;
}
    Rafferty: l'original de La réplique du CSS a été correct. Si un élément a actuellement padding: 10px, de réglage (sur le vol stationnaire) padding: 9px sera mis padding-top de 10px à 9px et padding-bottom de 10px à 9px - pour une réduction combinée de 2px.

    OriginalL'auteur thirtydot