谷歌浏览器上的边界半径中断

Question

我无法找到解决此问题的方法。 我已经设置了这个小例子here。

Google Chrome 似乎打破了 :hover 上的边框半径，而 Firefox 正确呈现它。解决此问题的正确方法是什么？

.bubble 中的

position:relative 可能是破坏它的原因，如果是这样，还有其他解决方案可以将 .info 绝对位置 div 嵌套到 .bubble 所以top: 会使用 .bubble 的顶部而不是页面？

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

Answer 1

我认为问题在于图片占据了整个背景。

我已对其进行了更改，因此您没有图像（并减小了边框半径）...所以只是基本的边框半径，当然，一切都很好：

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

http://jsfiddle.net/SbR6n/

听起来像一个错误。