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

我希望此按钮在悬停时具有边框（如此fiddle所示）。它实际上做我想做的事情，但它在Chrome和Firefox上抖动太多（IE10似乎完美地工作）。导致抖动的CSS悬停上的负边距

这是什么原因，以及如何处理在过渡期间不会出现抖动的解决方案？

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

来源

2013-10-22 Lucas Bernardo de Sousa

从百分比上的#container改变填充，以像素（或EMS ）在Chrome中有帮助：http://jsfiddle.net/zcPVj/17/ – superUntitled

是的，但FF和IE10仍然使用此解决方案抖动。 –

结帐我的第二次编辑 –

单独从图像本身的环：

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/

编辑：我添加了第二个环

来源

2013-10-22 14:35:00

不，同样的问题正在发生，那不会是解决方案..... –

Ah在Chrome中工作，但不是FF，5px边框到2px使它仍然抖动。最简单的事情就是让悬停5px，否则做另一个环股div。 –

有你原来的小提琴和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/

来源

2013-10-22 16:13:21 idotpdot

尽管如此，它没有我期待它具有的功能。我真的需要外部边框和内部元素之间的填充。如果你把我的原始代码，只是删除过渡，它会给你我正在寻找的确切结果（只有没有过渡本身，这是我唯一的问题）。 –

好的，看看这个更新的小提琴：http://jsfiddle.net/zcPVj/23/ – idotpdot

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

回答

相关问题