1

この問題の解決策を見つけるのに苦労しています。この小さな例をここに設定しました。

Google Chrome は:hoverで境界線の半径を壊しているようですが、Firefox は適切にレンダリングします。これを修正する正しいアプローチは何でしょうか?

position:relativein .bubbleはおそらくそれを壊すものです。そうであれば、.info絶対位置divを.bubbleにネストする他の解決策があるので、ページではなく.bubbletop:の上部を使用しますか?

HTML:

<div class="bubble">
    <img src="http://oneslidephotography.com/wp-content/uploads/2009/05/Digital-SLR-Photography-All-in-One-For-Dummies-sample-image.jpg" />
    <div class="info">
        <h3>Some Info Text</h3>
    </div>
</div>

CSS:

.bubble {
    position: relative;
    float: left;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
}

.info {
    overflow: hidden;
    position: absolute;
    width: inherit;
    -webkit-transition: top 0.2s ease-out;
    -moz-transition: top 0.2s ease-out;
    -o-transition: top 0.2s ease-out;
    -ms-transition: top 0.2s ease-out;
    transition: top 0.2s ease-out;
    top:200px;
}

.bubble:hover .info {
    top:80px;
}

.info h3{
    text-align: center;
    font-family: sans-serif;
}
4

1 に答える 1

1

問題は、背景全体を占める画像があることだと思います。

画像が表示されないように変更しました（境界線の半径を小さくしました）...基本的な境界線の半径だけで、もちろん問題ありません。

<div class="bubble" style='border:solid 1px'>
    <div class="info">
        <h3>Some Info Text</h3>
    </div>
</div>

http://jsfiddle.net/SbR6n/

バグのように聞こえます。

于 2013-02-08T21:47:50.723 に答える