悬停时的Chrome边框半径bug

Question

我有这个图像，当我将鼠标悬停在它的底部时，它会显示带有一些内容的div，但在div的底部会显示一个奇怪的灰色边框。这种情况发生在Chrome和IE中，Firefox完美显示。任何想法为什么会发生这种情况？

悬停

<div class="video_wrap" id="1" yt_id="-NschES-8e0" video_name="onajr ">
    <div class="img_wrap">
        <img src="http://img.youtube.com/vi/-NschES-8e0/hqdefault.jpg"></img>
    </div>
    <div class="title">o'najr</div>
</div>

.video_wrap {
    width: 240px;
    height: 240px;
    display: inline-block;
    border-radius: 120px;
    overflow: hidden;
    background: #fff;
    margin: 5px 10px;
    position: relative;
}

.img_wrap {
    width: 240px;
    height: 240px;
}

.title:hover {
    opacity: 1;
}

.title {
    position: relative;
    top: -50px;
    left: 0px;
    background: #fff;
    height: 50px;
    opacity: 0;
    color: rgba(248, 0, 140, 0.99);
    font-size: 12px;
    text-align: center;
    line-height: 50px;
    transition: all .5s ease-in;
    overflow: hidden;
    cursor: default;
}

.img_wrap img {
    transition: all .5s ease-in;
    height: 100%;
    cursor: pointer;
}

小提琴：http://jsfiddle.net/a12y1ork/2/

Answer 1

我从铬的角度来看我不知道问题是什么，但似乎Chrome正在使用外边缘像素的颜色来确定边框半径混合颜色。我尝试了许多方法来修复但无法找到可行的解决方案。

我找到了一种可能适合您需求的解决方法：

http://jsfiddle.net/a12y1ork/8/

通过强制边框半径和溢出：隐藏在img_wrap div上，并且还将容器div的宽度/高度增加1px，效果不可见：

.video_wrap {
    width: 241px;
    height: 241px;
    display: inline-block;
    overflow: hidden;
    background: transparent;
    margin: 5px 10px;
    position: relative;
    border-radius: 120px;
}

.img_wrap {
    width: 240px;
    height: 240px;
    border-radius: 370px;
    overflow: hidden;
}

Answer 2

显示图像的底部是黑色。您.title与它重叠仍然可以看到细条子。您可以将.img-wrap更改为以下内容，它将解决问题：http://jsfiddle.net/9hpborps/。

.img_wrap {
    height: 105%;
}