懸停時CSS邊框問題

Question

我正在自定義一種樣式，並且我遇到了邊框問題。當我飛過元素時，它不是靜態的（由於邊界，它向右移動）。

我已經在IP.Board注意到了這個問題太，我無法找到一個解決方案：http://screencast.com/t/49DgJmXuCN0v和去除邊框，一切都是完美的：http://screencast.com/t/n3JVAYFQRxK

如果有人能幫助我，謝謝。

Answer 1

邊框通常會增加元素佔據的區域的尺寸。這會導致後續內容被推送，但確切的效果取決於很多設置。試圖避免這會導致問題，因爲如果在添加邊框時總尺寸保持不變，則上下文區域尺寸會縮小。但還有其他幾種選擇：

1. 最初設置爲透明邊框，並在懸停時更改其顏色。
2. 最初設置與元素背景相同顏色的顏色。這只是上述的一個變種。
3. 除了輪廓之外，不要設置邊框。輪廓出現在其他任何東西的頂部（z方向），可能覆蓋一些內容，但不會改變佈局。這比前兩個選項稍微簡單一些，但是瀏覽器的支持稍有限制（IE的舊版本，你知道）。

<style> 
 
body { 
 
    background: white; 
 
    color: black; 
 
} 
 
.a:hover { 
 
    border: solid red medium; 
 
} 
 
.b { 
 
    border: solid transparent medium; 
 
} 
 
.b:hover { 
 
    border-color: red; 
 
} 
 
.c { 
 
    border: solid white medium; 
 
} 
 
.c:hover { 
 
    border-color: red; 
 
} 
 
.d:hover { 
 
    outline: solid red medium; 
 
} 
 
</style> 
 
<p><span class=a>Illustrating the problem.</span> What happens on mouseover? 
 
<p><span class=b>This has transparent border initially.</span> What happens on mouseover? 
 
<p><span class=c>This has white border initially.</span> What happens on mouseover? 
 
<p><span class=d>No border, but outline.</span> What happens on mouseover? 
 
<p>That’s all folx!

Answer 2

只需將box-sizing: border-box;添加到您的元素。獲取更多信息http://www.w3schools.com/cssref/css3_pr_box-sizing.asp