html - Chrome 错误中的边界半径？

Question

我对 chrome 中的 border-radius 有疑问 这是我的代码:

img{
border-radius: 24px;
border: 2px solid #c7c7c7;                 
-moz-border-radius:24px; 
-webkit-border-radius: 24px;
}

在 mozzila 上它工作正常，但在 chrome 上它看起来很有趣...... 在 mozzila 上，我可以看到一个圆圈与我的图像接壤，但在 chrome 上，圆圈裁剪了边界，我只能看到直线

截图:http://postimage.org/image/27turq0mc/

你能帮忙吗？

Answer 1

这可能是一个 chrome 错误。一个解决方案可能是用 div 包装 img 并制作以下​​ css:

img{                
    -moz-border-radius:24px; 
    -webkit-border-radius: 24px;
    border-radius: 24px;
    display:block;
}
div {
    border: 2px solid #c7c7c7; 
    border-radius: 24px;
    -webkit-border-radius: 24px;
    width:40px; /* the width of image */
    height:40px; /* the height of image */
}

演示: http://jsfiddle.net/EnmMp/1/