如何在改变边框宽度时防止移位

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小提琴演示.

Answer 2

如果您不想使用定位（有时会变得混乱，或与当前样式冲突），您可以使用负边距：

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

Answer 3

您需要修改位置以考虑边框宽度的变化.使用:

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

jsFiddle例子

Answer 4

未选择时添加填充。并在选择时删除填充。这将替换用于 2px 边框的 1pixel。

.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;
}