les grandes lignes de CSS en utilisant CSS border

Question

Malheureusement, les grandes lignes de CSS ne sont pas pris en charge dans IE7, donc je suis coincé à l'aide frontière. Mais en ajoutant une bordure à tout élément sur la page prend de la place et éventuellement déplace la page.

Si j'ajouter une bordure de 2px, je mets une marge -2px, il est pas parfait seuil, comme éléments de liste se déplacent vers la gauche, et « margin: auto ». Vis vraiment avec elle

Vous pouvez voir des exemples ici:

http://paul.slowgeek.com/nodeSelector/tests/simple.html

http://paul.slowgeek.com/nodeSelector/tests/center1.html

Par exemple, si une page a:

<div>
    <p>Lorem Ipsum</p>
</div>

Et puis je l'ai fait:

<div>
    <p style="border: 5px solid red">Lorem Ipsum</p>
</div>

La page serait maintenant 10 px plus grand et l'élément p serait 5 pixels en retrait. Mais si je l'ai fait:

<div>
    <p style="outline: 5px solid red">Lorem Ipsum</p>
</div>

dans Firefox 3, la page serait la même hauteur exacte et l'élément serait dans la même position. Je veux que ce comportement à travailler navigateur croix.

En gros, comment pouvez-vous utiliser une bordure CSS pour obtenir l'effet d'un contour CSS?

Answer 1

Si c'est vous effets hover êtes inquiet au sujet, et votre arrière-plan est de couleur uniforme alors simplement définir la frontière non-vol stationnaire ot les éléments à la couleur d'arrière-plan, puis il suffit de changer la couleur de vol stationnaire. Donc, l'élément est toujours la même taille, mais vous devrez diminuer le rembourrage pour ajuster la frontière toujours là.

au lieu de

a p {padding: 10px;}
a:hover {border: 5px solid red;}

utilisation

a p {border: 5px solid white;padding:5px}
a:hover p {border-color: red;}

En aparté, si vous utilisez: hover sur un élément autre qu'un lien ou une entrée alors aucun effet ne sera visible dans IE6, que beaucoup de gens utilisent encore. Mais vous pouvez utiliser le script IE7 pour résoudre ce problème: http://code.google.com/ p / IE7-js /