CSS 悬停上的负边距导致抖动

Question

我希望这个按钮在悬停时有一个边框（如这把小提琴所示）。它实际上做了我想让它做的事情，但它在Chrome和Firefox上抖动得太多了（IE10似乎可以完美地工作）。

造成这种情况的原因是什么，我怎样才能找到在过渡期间不会抖动的解决方案？


.HTML：

<div id="container">
    <div class="round_bt_container">
        <div class="round_bt" style="background-image:url(http://edinhopiscinas.com.br/img/img1.png);background-size:160px;background-position:center center;background-repeat:no-repeat;">
        </div>
    </div>
</div>

.CSS：

#container{
        width:80%;
        height:80%;
        position:absolute;
        padding:10%;
        background-image:url(http://edinhopiscinas.com.br/img/bg.jpg);
    }
    .round_bt_container{
        cursor:pointer;
        position:relative;
        float:left;
        margin-right:40px;
        border-radius:50%;
        border:5px solid #ffffff;
        box-shadow:2px 1px 15px -9px #000000;
        width:160px;
        height:160px;
        -webkit-transition:all 0.2s ease;
        -ms-transition: all 0.2s ease;
        -moz-transition:all 0.2s ease;
        -o-transition:all 0.2s ease;
        transition:all 0.2s ease;
    }
    .round_bt{
        position:absolute;
        border-radius:50%;
        width:160px;
        height:160px;
        padding:0;
        margin:0;
        border:0px solid #eeeeee;
        -webkit-transition:all 0.2s ease;
        -ms-transition: all 0.2s ease;
        -moz-transition:all 0.2s ease;
        -o-transition:all 0.2s ease;
        transition:all 0.2s ease;
    }
    .round_bt img{
        border-radius:50%;
    }
    .round_bt_container:hover .round_bt{
        width:160px;
        height:160px;
        border:5px solid #f98523;
        padding:15px;
        margin-left:-20px;
        margin-top:-20px;
    }
    .round_bt_container:hover{
        border:2px solid #ffcfa7;
        margin-left:3px;
        margin-top:3px;
    }

Answer 1

将环与图像本身分开：

.HTML

<div id="container">
    <div class="round_bt_container">
        <div class="inner_ring"></div>
        <div class="round_bt" style="background-image:url(http://edinhopiscinas.com.br/img/img1.png);background-size:160px;background-position:center center;background-repeat:no-repeat;"></div>
        <div class="ring"></div>
    </div>
</div>

.CSS

.ring {
    position:absolute;
    border-radius:50%;
    width:160px;
    height:160px;
    padding:0;
    margin:0;
    border:0px solid #eeeeee;
    -webkit-transition:all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -moz-transition:all 0.2s ease;
    -o-transition:all 0.2s ease;
    transition:all 0.2s ease;
}
.round_bt_container:hover .ring{
    width:160px;
    height:160px;
    border:5px solid #f98523;
    padding:15px;
    margin-left:-20px;
    margin-top:-20px;
}

http://jsfiddle.net/zcPVj/22/

编辑：我添加了第二个戒指

Answer 2

让你的原始小提琴和HTML使用一些修订：

为圆圈添加了跨浏览器框大小调整（这允许您使用实际宽度，而无需添加或减去边距和填充），它们很棒。

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

删除了.round_bt上的宽度并将其更改为百分比

width:100%;
height:100%;

这是您更新的小提琴：http://jsfiddle.net/zcPVj/21/