使用CSS边框的CSS大纲

Question

遗憾的是,IE7中不支持CSS大纲,所以我坚持使用边框.但是为页面上的任何元素添加边框会占用空间并可能会移动页面.

如果我正在添加一个2px的边框,那么我设置一个-2px的边距,它的底座并不完美,因为列表项向左移动,而"margin:auto"真的与它有关.

你可以在这里看到例子:

例如,如果页面具有:

<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/