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

Question

此页http://wildlife.x-tremeteam.com利用CSS边框图像属性和。带有透明边缘的png图像，可在我的div上创建“撕裂的纸张”外观。除了在我的Android（三星SIII）上，无论我使用的是它的默认浏览器还是Chrome应用程序，它都工作得很好。在这一点上，我可以看到在20px边界的内部和外部都有一个轻微的边缘。有趣的是，我看不到角落的边缘。带边框的div的背景是透明的。我只对其中的div应用背景色。

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

它一定与div的background color属性有关，因为如果我将其设置为红色，则边确实会变成红色。但是，使此属性透明不会将其删除。

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

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

它是边框图像属性的重复值。

在对不同颜色的图像和div进行了多次测试后，我意识到所有四个边（不是角）在另一个方向上也略有重复/错误。因此，当我的图像是一个外部边缘透明的橙色框时，外部边缘重复了一小块橙色。这并没有发生在iPhone6上，只有Android和可能较旧的iPhone。

换句话说，对于顶部，图像会根据需要水平重复。但它也只是在垂直方向上重复了一点点。我猜这是某种Android错误。

我通过使用STRETCH代替较小的媒体查询来修复它。我不喜欢它，但这就是成功的原因。