css - 更改边框宽度时如何防止移位

Question

这是一个 fiddle 。

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

如何防止元素在点击时出现移动？

元素通常有 1px 的边框，但在点击时变为 2px 的边框。

在 fiddle 中你会看到这个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 .