CSS-схема с использованием границы CSS

Question

К сожалению, CSS-контур не поддерживается в IE7, поэтому я застрял с использованием границы. Но добавление границы к любому элементу на странице занимает место и, возможно, сдвигает страницу.

Если я добавляю границу 2px, тогда я устанавливаю margin -2px, это порог не идеальный, поскольку элементы списка перемещаются влево, а «margin: auto» действительно винты с ним.

Вы можете увидеть примеры здесь:

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

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

Например, если страница была:

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

И тогда я сделал:

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

Страница будет теперь иметь 10 пикселей больше, а элемент p будет иметь отступ с 5 пикселями. Но если я сделал:

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

в Firefox 3, страница будет точно такой же высоты, и элемент будет находиться в том же положении. Я хочу, чтобы это поведение работало с перекрестным браузером.

В принципе, как вы можете использовать границу CSS, чтобы получить эффект контура CSS?

Answer 1

Если это зависание, которое вас беспокоит, и ваш фон имеет однородный цвет, тогда просто установите границу без привязки элементов к цвету фона, а затем просто измените цвет на зависании. Таким образом, элемент всегда имеет тот же размер, хотя вам придется уменьшать отступ, чтобы приспособиться к границе, всегда находящейся там.

так вместо

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

использование

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

Как и в сторону, если вы используете: парить на любом элементе, кроме ссылки или вход, то никакого эффекта не будет видно в ie6, которые многие люди все еще используют. Но вы можете использовать скрипт ie7, чтобы исправить это: http://code.google.com/p/ie7-js/