更改边框宽度时如何防止移动

这是一把小提琴。

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

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

元素通常具有 1 像素边框，但单击时会变为 2 像素边框。

在小提琴中你会看到这个CSS

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

.selected {
    border: 2px solid blue;
}

虽然您已经接受了一个有效的答案，但它似乎比需要的要复杂得多，必须计算和调整边距等；我自己的建议是使边框本身透明，并使用假“边框”，使用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 小提琴演示 http://jsfiddle.net/davidThomas/86juF/10/.