Html css悬停上的负边距导致抖动

我希望这个按钮在悬停时有一个边框（如图所示）。它确实做了我想要它做的事情，但是在Chrome和Firefox上它太紧张了（IE10似乎工作得很好）

造成这种情况的原因是什么？我怎样才能找到一个在转换过程中不会抖动的解决方案？


HTML:

---

将戒指与图像本身分开：

HTML

---

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

让您的原始小提琴和HTML进行了一些修订：

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

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

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

width:100%;
height:100%;

这是你最新的小提琴：

---

Ah在Chrome中工作，但在FF中不工作，5px到2px的边界使其仍然抖动。最简单的方法是将悬停设置为5px，否则再设置一个环div。将#容器上的填充从百分比更改为像素（或ems）有助于Chrome：是的，但是FF和IE10仍然会在这个解决方案中抖动。请查看我的第二版，效果非常好！正是我想要的。接受你的答案，尽管它缺少一些关于你到底做了什么以及为什么它工作的解释。基本原理我分离了动画的组件，这样图像在变形时不会受到影响。尽管如此，它没有我期望的功能。我真的需要在外部边界和内部元素之间填充。如果您使用我的原始代码并删除转换，它将为您提供我想要的确切结果（只有没有转换本身，这是我唯一的问题）。

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

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

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

width:100%;
height:100%;