contorno CSS utilizzando confine CSS

Question

Purtroppo, contorno CSS non è supportato in IE7, così mi sono bloccato con bordo. Ma l'aggiunta di un bordo a qualsiasi elemento della pagina occupa spazio ed eventualmente sposta la pagina.

Se io sono l'aggiunta di un bordo 2px, poi ho impostato un margine -2px, ma davanzale non è perfetto, come elementi di una lista si spostano verso sinistra, e "margin: auto". Realmente viti con esso

È possibile vedere esempi qui:

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

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

Ad esempio, se una pagina ha avuto:

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

E poi ho fatto:

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

La pagina ora sarebbe 10 px più grande e l'elemento di p sarebbe 5 pixel rientrato. Ma se l'ho fatto:

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

in Firefox 3, la pagina sarebbe la stessa altezza e l'elemento sarebbe nella stessa posizione. Voglio che questo comportamento di lavorare cross browser.

In sostanza, come si può utilizzare un bordo CSS per ottenere l'effetto di un contorno CSS?

Answer 1

Se è librarsi effetti siete preoccupati, e lo sfondo è di colore uniforme, poi semplicemente impostare il confine non hover ot gli elementi per il colore di sfondo, e poi basta cambiare il colore al passaggio del mouse. Così l'elemento è sempre la stessa dimensione, anche se si dovrà diminuire l'imbottitura per regolare per il confine di essere sempre lì.

così invece di

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

utilizzo

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

Per inciso, se si sta utilizzando: hover su un qualsiasi elemento che non sia un collegamento o un input allora nessun effetto sarà visto in IE6, che un sacco di persone usano ancora. Ma è possibile utilizzare lo script IE7 per risolvere questo: http://code.google.com/ p / IE7-js /