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/