红米手机 webview 里面边框+圆角,会导致背景颜色溢出

开发中发现,在红米手机的webview里面,如果在同一个元素上同时设置了边框以及圆角,而且有背景颜色时,背景颜色会溢出,没有圆角效果。
其实这个是因为红米解析css的background时出了问题。
在css2引擎里,background的显示是不包括border的,意思是从padding开始;
可是在css2.1~css3引擎里,background的显示则是包括border的,意思是从border开始;
红米解析background时,background没有根据border的圆角而圆,而是溢出了,而去掉border,background还是能圆的。
所以,会出现这个问题,主要是元素加了边框,而且是圆角的,再加上有背景颜色。
要解决这个问题,就要把background从border移进去padding开始。
简单的说,就是再加上属性background-clip:padding-box;就可以解决这个问题了。

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注