边框图像在Safari (OS和iOS)中停止显示

Question

边框图像也不再出现在OS和iOS上的Safari中。我在苹果电脑上使用Safari10，在iPad和iPhone上使用最新版本的iOS。它在Firefox中的显示方式与过去在所有浏览器上显示的方式相同。

网址为：http://majesticpinescolorado.com/

 #sidebar .inner{
border: 1px solid #8e8cae; 
-moz-border-image:url(images/border.png) 50 50 repeat; /* Old firefox */
-webkit-border-image:url(images/border.png) 50 50 repeat; /* Safari */
-o-border-image:url(images/border.png) 50 50 repeat; /* Opera */
border-image:url(images/border.png) 50 50 repeat;    

}

我研究了一下我做错了什么，但所有的声明似乎都是正确的。任何帮助都是非常感谢的。

Answer 1

我在这里找到了这个问题的答案：border image not showing in safari。它是这样写的：

“我找到了一个解决方案，并希望在有人遇到同样的问题时分享它。通过删除边框速记属性并将其替换为边框样式和边框宽度，问题得到了解决。”

如下所示：

.borderWrap{

border-style: solid;
border-width: 34px;
border-image: url(../images/spriteOneFrame.png) 34 34 round;

}

而不是：

.borderWrap{

border: solid 34px transparent;
border-image: url(../images/spriteOneFrame.png) 34 34 round;

}

Answer 2

您需要为边框赋予与边框图像相同的宽度：

border: 50px solid transparent;