Ajouter une bordure CSS sur vol stationnaire sans déplacer l'élément

Possible en double:
CSS hover border makes inline elements adjust slightly Ajouter une bordure CSS sur vol stationnaire sans déplacer l'élément

J'ai une ligne que je pose ma candidature un moment fort de fond sur le vol stationnaire.

.jobs .item:hover { 
    background: #e1e1e1; 
    border-top: 1px solid #d0d0d0; 
}

Cependant, la frontière ajoute 1px supplémentaire à l'élément, il fait « bouger ». Comment pourrais-je compenser le mouvement ci-dessus ici (sans utiliser une image de fond)?

Source

2012-03-08 David542

Votre élément a une hauteur définie? Si oui, vous pouvez 1) utiliser 'box-sizing: border-box' (avec les préfixes nécessaires) pour les navigateurs modernes, ou 2) tricher en ajoutant une bordure de la même couleur que l'arrière-plan par défaut et raser 1 pixel de la hauteur spécifiée . – BoltClock

voir ma réponse ci-dessous et laissez-moi savoir si je suis à la traîne ici, donc je peux vous comprendre problème plus précisément. – w3uiguru

188

Vous pouvez rendre la bordure transparente. De cette façon, il existe, mais est invisible, donc il ne pas pousser quoi que ce soit autour de:

.jobs .item { 
    background: #eee; 
    border-top: 1px solid transparent; 
} 

.jobs .item:hover { 
    background: #e1e1e1; 
    border-top: 1px solid #d0d0d0; 
}

Si vos éléments ont spécifié height et/ou width, vous pouvez également utiliser box-sizing:border-box;, comme ce modèle de boîte comprend un rembourrage et la bordure des largeurs dans la dimension calculée, par exemple:

.jobs .item { 
    background: #eee; 
    height: 40px; 
    box-sizing: border-box; 
} 

.jobs .item:hover { 
    background: #e1e1e1; 
    border-top: 1px solid #d0d0d0; 
}

Source

2012-03-08 04:12:32 Duopixel

quelqu'un a vu un moyen de résoudre cela en utilisant l'attribut CSS 'box-sizing: border-box; – tim

@tim oui, cela fonctionne avec 'box-sizing: border-box;' aussi. – Duopixel

Simple et cela fonctionne. Merci! Parfois, la réponse évidente n'est pas si évidente tant qu'elle ne vous frappe pas au visage. – SeanKendle

Ajouter un border à l'élément normal, le même color que le background, de sorte qu'il ne peut pas être vu. De cette façon, l'article a un border: 1px s'il est plané ou non.

Source

2012-03-08 04:11:50 danapaige

ajouter margin:-1px; ce qui réduit de chaque côté 1px. ou si vous avez besoin seulement pour le côté vous pouvez faire margin-left:-1px etc.

Source

2012-03-08 04:12:51 Dips

C'était la meilleure solution pour moi car, dans mon cas, j'ai mis une bordure 1px à l'élément orignal et je veux obtenir, en vol stationnaire, une bordure plus épaisse (3px). Utiliser 'margin: -2px;' fonctionne en effet. –

En effet, la meilleure solution lorsque l'épaisseur de la bordure change d'un état à l'autre. –

sauvé mon temps :) merci – medBo

Essayez ceci cela pourrait résoudre votre problème.

Css:

.item{padding-top:1px;} 

.jobs .item:hover { 
    background: #e1e1e1; 
    border-top: 1px solid #d0d0d0; 
    padding-top:0; 
}

HTML:

<div class="jobs"> 
     <div class="item"> 
      content goes here 
     </div> 
</div>

Voir violon pour la sortie: http://jsfiddle.net/dLDNA/

Source

2012-03-08 04:19:04 w3uiguru

voici la nouvelle: http://jsfiddle.net/fbfjw/3/embedded/result/ – Jack

http://s21.postimg.org/q8n11ng6v/test_2.png – Jack

Ajouter une bordure CSS sur vol stationnaire sans déplacer l'élément

Répondre

Questions connexes