CSS 테두리를 사용한 CSS 개요

Question

안타깝게도 CSS 개요는 IE7에서 지원되지 않으므로 테두리를 사용하여 고정되어 있습니다. 그러나 페이지의 모든 요소에 테두리를 추가하면 공간을 차지하고 페이지가 이동할 수 있습니다.

2px 테두리를 추가하면 -2px 마진을 설정하면 목록 항목이 왼쪽으로 이동하고 "마진 : 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 px 더 크고 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/