css - 使用 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 像素，p 元素将缩进 5 像素。但如果我这样做了：

<div>
    <p style="outline: 5px solid red">Lorem Ipsum</p>
</div>

在 firefox 3 中，页面将具有完全相同的高度，并且元素将位于相同的位置。我希望这种行为能够跨浏览器工作。

基本上，如何使用 CSS 边框来获得 CSS 轮廓的效果？

score 6 · Accepted Answer

如果您担心的是悬停效果，并且您的背景颜色统一，那么只需将元素的非悬停边框设置为背景颜色，然后只需更改悬停时的颜色即可。所以元素总是相同的大小，尽管你必须减少填充来调整边界总是在那里。

所以而不是

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/

1 回答 1