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