开发中发现,在红米手机的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;就可以解决这个问题了。

© 2012 Hedgehog Suffusion theme by Sayontan Sinha