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

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;
    left:-1px;
    top:-1px;
}

jsFiddle 示例

Answer 3

未选中时添加填充。并在选择时删除填充。这将替换用于 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;
}

Answer 4

其他选项：

box-sizing: border-box;

这将包括边框宽度作为总宽度的一部分，但您会注意到内容的变化

wrap with another div

您可以包装内容，内容 div 将有 1px 边框白色，外部 div 将是 1px 蓝色。在选择两个 div 更改为红色。

Answer 5

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

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

Answer 6

你可以给他们绝对的位置。

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