悬停的Chrome边框半径错误

Question

我有这张图片，当我将它悬停在底部时，它会在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%; 
}