边框图像停止在Safari(OS和iOS)中显示 [英] Border image stopped showing in Safari (OS and iOS)

问题描述

边框图像也不再出现在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;    

}

我研究过发现自己在做错什么，但是所有声明似乎都是正确的.任何帮助将不胜感激.

解决方案

我在这里找到了这个确切问题的答案:

例如:

.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;

}

Border image stopped appearing in Safari on OS and iOS as well. I'm using Safari 10 on my Mac and latest version of iOS on my iPad and iPhone. It does show in Firefox the way it used show on all browsers.

Website URL is: 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;    

}

I researched to see what I'm doing wrong, but all declaration seem to be correct. Any help is greatly appreciated.

解决方案

I found an answer to this exact problem here: border image not showing in safari. This is what it says:

"I was able to find a solution and wanted to share it in case somebody has the same problem. The problem was fixed by removing the border shorthand property and replacing it with border-style and border-width."

Such as this:

.borderWrap{

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

}

Instead of:

.borderWrap{

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

}

这篇关于边框图像停止在Safari(OS和iOS)中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！