使用CSS边框的CSS轮廓

Question

可悲的是，IE7不支持CSS轮廓，因此我只能使用边框。 但是在页面上的任何元素上添加边框会占用空间，并且可能会移动页面。

如果我要添加2px的边框，那么我将其设置为-2px的边距，这并不是一个完美的选择，因为列表项向左移动，并且“ margin：auto”确实固定了它。

您可以在此处查看示例：

http://paul.slowgeek.com/nodeSelector/tests/simple.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;}

顺便说一句，如果您在链接或输入以外的任何元素上使用：hover，则在ie6中不会看到任何效果，很多人仍在使用它。 但是您可以使用ie7脚本来解决该问题： http : //code.google.com/p/ie7-js/