CSS-контур с использованием CSS-границы - PullRequest
Новая
       43

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

0 голосов
/ 12 апреля 2009

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

Если я добавляю границу 2px, то я устанавливаю поле в -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?

1 Ответ

6 голосов
/ 12 апреля 2009

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

так вместо 

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/

...