html – Chrome中的border-radius bug？

发布时间：2020-12-14 22:33:23 所属栏目：资源来源：网络整理

导读：我在chrome中的border-radius有问题这是我的代码： img{border-radius: 24px;border: 2px solid #c7c7c7; -moz-border-radius:24px; -webkit-border-radius: 24px;} 在mozzila它工作正常,但在Chrome上看起来很有趣…… 在mozzila上,我可以看到一个与我的图

我在chrome中的border-radius有问题
这是我的代码：

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

在mozzila它工作正常,但在Chrome上看起来很有趣……
在mozzila上,我可以看到一个与我的图像接壤的圆圈,但是在铬上,圆圈会剪切边框,我所能看到的都是直线

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

你能帮我吗？

解决方法

这可能是一个铬虫.一个解决方案可能是使用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/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!