CSS-Gliederung mit CSS-Rahmen

Question

Leider wird CSS-Gliederung in IE7 nicht unterstützt, daher bleibe ich bei der Verwendung von border. Das Hinzufügen eines Rahmens zu einem beliebigen Element auf der Seite nimmt jedoch Raum in Anspruch und verschiebt möglicherweise die Seite.

Wenn ich einen 2px Rahmen hinzufüge, dann setze ich einen -2px Rand, es ist nicht perfekt, wie Listenelemente nach links bewegen, und "margin: auto" wirklich Schrauben mit ihm.

können Sie Beispiele sehen hier:

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

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

Zum Beispiel, wenn eine Seite hatte:

<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 px größer und das p-Element wäre 5 Pixel eingerückt. Aber wenn ich tue:

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

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

Wie können Sie einen CSS-Rahmen verwenden, um den Effekt einer CSS-Gliederung zu erhalten?

Answer 1

Wenn es um Schwebeeffekte geht, die Sie beunruhigen, und Ihr Hintergrund eine einheitliche Farbe hat, dann setzen Sie einfach den nicht schwebenden Rand der Elemente auf die Hintergrundfarbe und ändern dann einfach die Farbe beim Schweben. Das Element hat also immer die gleiche Größe, aber Sie müssen das Padding verringern, um den Rand anzupassen, der immer da ist.

so statt

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 Nebenwirkung, wenn Sie verwenden: schweben auf einem beliebigen anderen Element als einen Link oder einen Eingang, dann wird kein Effekt zu sehen in ie6, die noch viele Leute benutzen. Aber Sie können das ie7-Skript verwenden, um das zu beheben: http://code.google.com/p/ie7-js/