使用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> 

现在页面会变大10px，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/