esquema CSS usando frontera CSS

Question

Lamentablemente, el esquema CSS no es compatible con Internet Explorer 7, por lo que estoy atascado utilizando frontera. Sin embargo, la adición de un borde a cualquier elemento de la página ocupa espacio y posiblemente cambia la página.

Si estoy añadiendo una frontera 2px, entonces me puse un margen -2px, que alféizar no es perfecto, como elementos de la lista se mueven hacia la izquierda, y "margen: auto". Realmente tornillos con ella

Puede ver ejemplos aquí:

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

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

Por ejemplo, si una página tenía:

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

Y entonces hice:

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

La página ahora sería de 10 píxeles más grande y el elemento P sería 5 píxeles con sangría. Pero si lo hiciera:

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

en Firefox 3, la página sería la misma altura exacta y el elemento estaría en la misma posición. Quiero que este comportamiento para trabajar con navegadores.

Básicamente, ¿cómo se puede utilizar una frontera CSS para conseguir el efecto de un esquema CSS?

Answer 1

Si se trata de flotar efectos que te preocupa, y su fondo es de color uniforme a continuación, establecer simplemente el borde no estacionario de la The elementos al color de fondo, y luego simplemente cambiar el color en vuelo estacionario. Por lo que el elemento es siempre el mismo tamaño, aunque se tenga que disminuir el relleno para ajustarse a la frontera estar siempre ahí.

por lo en lugar de

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

uso

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

Como acotación al margen, si usted está usando: flotar sobre cualquier elemento que no sea un enlace o una entrada no se produce efecto se verá en IE6, que muchas personas siguen utilizando. Sin embargo, se puede utilizar el script IE7 para arreglar eso: http://code.google.com/ p / ie7-js /