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

Question

边框图像也停止出现在OS和iOS上的Safari中。我在Mac上使用Safari 10和iPad和iPhone上的最新版本的iOS版本。它确实在Firefox中显示了其在所有浏览器上显示的方式。

网站URL是：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

我在此处找到了这个确切问题的答案：边框图像未在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;