Контур CSS с использованием границы CSS

Question

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

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

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

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;}

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