如何在更改邊框寬度時防止移位

Question

這裏是一個小提琴。

http://jsfiddle.net/86juF/1/

如何防止元素出現在點擊轉型呢？

元素通常具有1px邊框，但在點擊時轉到2px邊框。

在撥弄你會看到這個CSS

.o { 
    height: 50px; 
    width: 100px; 
    border: 1px solid red; 
    margin-bottom: 10px; 
    font-weight: bold; 
    font-size: 16px; 
} 

.selected { 
    border: 2px solid blue; 
} 

Answer 1

雖然你已經接受了一個有效的答案，但它似乎比它更復雜，不得不計算和調整邊距等;我的建議是使邊界本身透明，並使用僞造的「邊界」，使用box-shadow（這不會導致任何運動，因爲它不是「流」這樣的一部分）：

.o { 
    /* no changes here */ 
} 

.o.selected { 
    border-color: transparent; /* remove the border's colour */ 
    box-shadow: 0 0 0 2px blue; /* emulate the border */ 
} 

JS Fiddle demo。

Answer 2

你需要修改，以考慮邊框寬度變化的位置。用途：

.selected { 
    border: 2px solid blue; 
    position:relative; 
    left:-1px; 
    top:-1px; 
} 

jsFiddle example

Answer 3

你可以給他們的絕對位置。

.o { 
height: 50px; 
width: 100px; 
border: 1px solid red; 
margin-bottom: 10px; 
font-weight: bold; 
font-size: 16px; 
position: absolute; 
} 

.o1 { 
    top: 10px; 
} 

.o2 { 
    top: 100px; 
} 

.selected { 
    border: 2px solid blue; 
} 

Answer 4

未選中時添加填充。 並選擇時刪除填充。 這將取代用於2px邊框的1像素。

.o { 
    height: 50px; 
    width: 100px; 
    border: 1px solid red; 
    margin-bottom: 10px; 
    font-weight: bold; 
    font-size: 16px; 
    padding: 1px; 
} 

.selected { 
    border: 2px solid blue; 
    padding: 0px; 
} 

Answer 5

如果你不想與定位工作（會導致混亂，有時，或與當前的風格碰撞），則可以使用負保證金：

.selected { 
    border: 2px solid blue; 
    position:relative; 
    margin: -1px; 
} 

Answer 6

其他選項：

box-sizing: border-box;

這將包括作爲總寬度的一部分的邊框寬度，您會注意到內容的移位，雖然

wrap with another div

你可以換的內容，內容的div將有1px的白色邊框的外層div會1px的藍色。選擇兩個div變成紅色。