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

问题描述

这是一个小提琴.

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

如何防止元素在点击时出现偏移?

how do I prevent the elements from appearing to shift on click?

元素通常具有1px的边框，但在单击时变为2px的边框.

The elements normally have a 1px border but go to a 2px border on click.

在小提琴中，您将看到此CSS

In the fiddle you will see this 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使用伪造的边界"(由于它不属于流程"，因此不会引起任何移动):

While you've already accepted an answer, which works, it seems rather more complicated than it needs to be, having to calculate and adjust margins and such; my own suggestion would be to make the border itself transparent, and use a fake 'border', using box-shadow (which doesn't cause any movement since it's not part of the 'flow' as such):

.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演示.

这篇关于更改边框宽度时如何防止移位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！