使用 CSS 边框的 CSS 轮廓

Question

遗憾的是，IE7 不支持 CSS 轮廓，所以我只能使用边框。但是向页面上的任何元素添加边框都会占用空间，并且可能会移动页面。

如果我添加 2px 边框，然后设置 -2px 边距，它仍然不完美，因为列表项向左移动，而“margin: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 像素，p 元素将缩进 5 像素。但如果我这样做了：

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

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

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

Answer 1

如果它悬停你担心的影响，和你的背景是色泽均匀，然后简单地设置非悬停边境OT了元素的背景颜色，然后只是改变悬停颜色。所以元素总是相同的大小，但你将不得不降低填充调整为边界总是在那里。

所以 代替

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 /