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/

听起来像个错误。

谷歌铬的边界半径打破

1 个答案: