border-radius 在最新的 UCWEB 及微信里竟然不完美支持

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 3443 天前的主题，其中的信息可能已经有所发展或是发生改变。

如果给图片加了width:50px;height:50px;border-radius:25px;-webkit-border-radius:25px;border:3px solid #fff;
在微信及UCweb里会出现下图的情况。白色边框竟然不是圆形的！！！

而在手机版的chrome里却一切正常。这是bug?

微信

border

ucweb

11 条回复 • 2014-11-25 23:46:37 +08:00

crs0910

2014-11-25 20:19:01 +08:00

图片中不就是圆的吗？你是说不够圆？

算上 border 应该是 border-radius:28px; 或者直接 border-radius:50%;

Sivan

2014-11-25 20:23:53 +08:00

border-radius:50%;

shpasspass

2014-11-25 20:55:02 +08:00

@crs0910
@Sivan
多截了几张图做比较，就是这个border的区别

kmvan

2014-11-25 21:13:36 +08:00

系统自带浏览器支持，他们这些没有内置内核的壳子就支持。

Sivan

2014-11-25 21:21:29 +08:00

LZ 是什么系统测的？

@kmvan 会不会是安卓下 UC 设成了默认浏览器，然后微信走了 UC……

wwqgtxx

2014-11-25 21:57:17 +08:00 via Android

@Sivan 不可能，微信调用webview是不可能调用uc的，安卓不支持像win那样调用别的程序的lib
安卓的webview在4.0之前是webkit，之后是chromium的修改版，4.4之后应该完全和原版chromium相同
而uc浏览器是完全用自己编译的webkit内核
所以不一样是很正常啊

crs0910

2014-11-25 22:03:06 +08:00

这个不知道为什么，你可以试试 border-radius:9999px;
或者干脆不用border，改用 box-shadow 来实现。

crs0910

2014-11-25 22:10:08 +08:00

再不行的话，img 外面套多个 div，把 border 和 border-radius 设置到 div 上。 img 就只加 border-radius 。我自己的手机测试是可以的。Android 4.3

shpasspass

2014-11-25 23:20:23 +08:00

安卓4.3的，刚才用了crs0910的方法，算是用障眼法成功了~谢谢了。
不过ucweb和微信竟然对border-radius不完美支持，也是醉了。

xinple

2014-11-25 23:23:53 +08:00

老的webkit不支持border-radius: 50% 的，只能把数值设大一点
如果是border-box, 那就是25px，如果是content-box，那就是28px

然后doctype 使用 <!DOCTYPE html>
你截图看不出doctype用的是html4.0什么版本的，但是 <!DOCTYPE html> 是目前最佳的

chairuosen

2014-11-25 23:46:37 +08:00

不要给img加Border