4

ホバー時にこのボタンの周りに境界線を付けたいです（このフィドルで見られるように）。それは実際に私がやりたいことを実行しますが、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;
    }
4

2 に答える 2

0

元のフィドルと 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-22T16:13:21.687 に答える