带有透明图像的CSS边框图像在Android上显示了边缘

Question

本页http://wildlife.x-tremeteam.com利用CSS border-image属性和一个带有透明边缘的.png图像在我的div上创建一个"碎纸"外观。除了在我的Android（三星SIII）上，无论我使用的是它的默认浏览器还是Chrome应用程序，它都能很好地工作。在上面，我可以看到20像素边界内外的轻微边缘。有趣的是，我看不到角落的边缘。带有边框的div的背景是透明的。我只对里面的div应用了背景色。

我桌面上的浏览器、我用来测试的iPhone以及responsinator.com上的所有渲染都不会显示图像的边缘。

它一定与div的背景颜色属性有关，因为如果我将其设置为RED，边缘就会变成红色。然而，使该属性透明并不能去除它。

CSS如下，其中还包括一个默认的div属性，但没有帮助：

div {border: 0; border-style: none; }
.BoxGrunge {  
    border-color: #7777777; /* this won't really be seen */
    border-style: double;/* this won't really be seen */
    border-width: 20px 20px 20px 20px;
    -webkit-border-image: url(images/RippedEdgeWhiteTrans.png) 20 20 20 20 repeat;
    -moz-border-image: url(images/RippedEdgeWhiteTrans.png) 20 20 20 20 repeat;
    border-image: url(images/RippedEdgeWhiteTrans.png) 20 20 20 20 repeat;
    background-color: transparent; /* otherwise there is a white edge on Android */  /*THIS DOESN'T HELP */
    display: block !important;
    margin: 0 0 5px 0;
}

谢谢，我已经盯着这个看了好几个小时了，都想不通。

Answer 1

我终于自己找到了。主要地

它是边界图像属性的REPEAT值。

在对不同颜色的图像和div进行了大量测试后，我意识到所有四个边（而不是角）也在另一个/错误的方向上轻微重复。因此，当我的图像是一个外部边缘透明的橙色盒子时，一小块橙色在外部边缘重复出现。这并没有发生在iPhone 6上，只有安卓系统，可能还有更旧的iPhone。

换句话说，对于顶部，图像是根据需要水平重复的。但它也只是垂直地重复了一点点。我猜这是某种安卓系统的错误。

我通过对较小的媒体查询使用STRETCH来修复它。我不喜欢它，但这就是它的作用。