Safari浏览器中边框图像未显示

Question

在Safari浏览器和平板电脑、移动设备上，边框图像不能正常显示。但在火狐、IE、谷歌和欧朋浏览器中没有问题。

以下是HTML代码：

<div class="col-sm-4 ctas" id="togglelinks">
    <div class="rooms">
        <img src="images/bedroom1.jpg" alt="" class="img-responsive" />
        <h6>Room 1</h6>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam</p>
        <p><a class="btn togglee" target="one">MORE INFORMATION</a></p>
    </div>
</div>

还有CSS

.rooms {
    border: 15px solid transparent;
    color: #fff;
    padding: 5px;
    border-image: url("../images/paint-blk.png") fill 21 repeat;
}

额外的信息：我正在使用Bootstrap v3.0.3。页面正在验证中。在FireBug中，边框、颜色和填充都显示正常，但图片没有显示。

- JCooke

Answer 1

我在寻找解决Safari 10.0相同问题的方法时找到了这篇文章。我已经成功找到了解决方案，想要分享给有相同问题的人。解决问题的办法是通过删除边框缩写属性，并用边框样式和边框宽度代替来修复它。

以下是我的代码，在此之前无法工作：

 .borderWrap{

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

新代码已经起作用：

.borderWrap{

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

- roco15

---

感谢您的回答，我发现显然是“transparent”属性使边框在Safari中不显示。将其更改为“inherit”即可解决问题。 - not2savvy

将颜色更改为"inherit"对我也没有起作用。但添加一个透明度较低的颜色，如rgba(0,0,0,0.01)，可以解决问题。但透明度值必须大于0。 - dardub

@dardub 那对我有用。也许你应该把它建议为一个答案。你绝对有我的支持。 - Rorok_89

@not2savvy 这个方法对我有用，结合这个答案，谢谢。 - Jake

Answer 2

在2017年6月，Safari浏览器版本10.1.1在w3schools.com网站上不再显示边框图片。在border-image.com上有一个边框图片生成器（我希望我可以在这里提到它！），至少适用于Safari、Chrome和FF for Mac。

border-style: solid;
border-width: 5px;
-moz-border-image: url(border.png) 27 repeat;
-webkit-border-image: url(border.png) 27 repeat;
-o-border-image: url(border.png) 27 repeat;
border-image: url(border.png) 27 fill repeat;

- Mary

Answer 3

我放弃尝试让边框图像正常工作了。它的支持还不够好。所以我把它改成了背景图像，并且成功地解决了这个问题。

这在除了Safari和一些设备之外的所有浏览器中都可以正常工作：

.rooms {
    color: #fff;
    background: url("../images/paint-blk2.png") 0 0 / 100% 100% no-repeat;
    padding: 25px;
    height:410px;
}

但为了在Safari中正常工作，需要这样设置：

.rooms {
    color: #fff;
    background: url("../images/paint-blk2.png") no-repeat;
    background-size: 100% 100%;
    padding: 25px;
    height:410px;
}

故事的寓意是，坚持使用有效的方法，直到他们完善了新的东西。

- JCooke

Answer 4

你是否正在使用最新版本的Safari进行检查？ 在5版本之前，Safari不支持border-image。但老实说，最好通过使用-o、-webkit和-moz标签来尽可能地支持更多旧版浏览器。 您可以在w3schools的border-image页面上了解如何使用这些标签。

http://www.w3schools.com/cssref/css3_pr_border-image.asp

一般来说，您只需要将每个浏览器的前缀添加到标准的 CSS 代码中即可。

- nemesiswho

Answer 5

我使用了随机颜色，而不是透明或继承，在Safari上可以工作。

border-image 覆盖了我设置的图像。为了防止在旧的浏览器上 border-image 不显示，我仍然会使用一个好的备选颜色。

border: 10px solid blue !important;
border-image: url(/myImage.png) 20% stretch;

- DigitalDesignDude