CSS Umriss mit CSS Grenze

Question

Leider CSS Umriss ist nicht in IE7 unterstützt, so dass ich bin fest Grenze mit. Aber das Hinzufügen einer Grenze zu jedem Element auf der Seite nimmt Raum und möglicherweise verschiebt die Seite.

Wenn ich eine 2px Grenze hinzugefügt, dann stelle ich eine -2px Marge, es Schweller ist nicht perfekt, als Listenelemente nach links zu bewegen, und „margin: auto“. Wirklich Schrauben mit ihm

Sie können Beispiele siehe hier:

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

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

Zum Beispiel, wenn eine Seite hat:

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

Und dann tat ich:

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

Die Seite wäre jetzt 10 Pixel größer und das p-Element würde 5 Pixel eingerückt werden. Aber wenn ich es täte:

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

in Firefox 3, würde die Seite genau die gleiche Höhe sein und das Element in der gleichen Position sein würde. Ich möchte dieses Verhalten Cross-Browser arbeiten.

Im Grunde genommen, wie können Sie eine CSS-Grenze verwenden, um die Wirkung eines CSS-Umrisses zu bekommen?

Answer 1

Wenn es Auswirkungen gibt schweben Sie besorgt sind, und Ihr Hintergrund ist eine einheitliche Farbe setzen Sie einfach die Nicht-Hover-Grenze, die Elemente zu der Hintergrundfarbe ot, und dann ändern Sie einfach die Farbe auf schweben. So ist das Element immer die gleiche Größe, wenn Sie die Polsterung verringern müssen für die Grenze einzustellen immer dort zu sein.

so anstelle von

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

Verwendung

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

Als beiseite, wenn Sie verwenden: schweben auf einem beliebigen anderen Element als einen Link oder einen Eingang, dann wird kein Effekt in IE6 zu sehen, die eine Menge Leute immer noch verwenden. Aber Sie können die IE7 Skript, das zu beheben: http://code.google.com/ p / iE7-js /