箱縮放邊框出現在懸停內容移動

Question

代碼：

​​

將鼠標懸停在使用盒大小的塊，裏面的內容是移動的，如何防止這種情況？

Answer 1

div.block { 
    box-sizing: border-box; 
    border: 1px solid [your bg color]; 

} 
div.block:hover { 
    border: 1px solid orange; 
} 

試試這個:)

當你懸停它增加了一個邊界。所以它製作額外的像素。如果你添加一個邊框到原始項目（這種情況下），IT不必添加新的像素，因爲他們已經存在。

如下表示：1px的邊界固體transperparent西港島線做工精細，以

Answer 2

如果你不關心老版本的IE更好的嘗試：

div.block:hover { 
    box-shadow: 0 0 1px orange inset; 
} 

或者使用下面的

div.block { 
    border: 1px solid transparent; 
} 
div.block:hover { 
    border-color:orange; 
}