Question

这是一个小提琴。

如何阻止元素在点击时出现转移？

这些元素通常具有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

未选择时添加填充。并在选中时删除填充。这将取代用于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 4

其他选择：

box-sizing: border-box;

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

wrap with another div

你可以包装内容，内容div将有1px边框白色外部div将是1px蓝色。选择时，两个div都变为红色。

Answer 5

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

.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 6

如果您不想使用定位（有时可能会弄乱，或与当前样式碰撞），您可以使用负边距：

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

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

6 个答案: