Safari 中不显示边框图像

边框图像未显示在 Safari 或平板电脑和移动设备上。在 FF、IE、Chrome 和 Opera 中都没有问题。

这是 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 中，边框、颜色、填充被带入，但图像未被带入。

我在寻找 Safari 10.0 相同问题的解决方案时发现了这篇文章。我找到了解决方案，并希望分享它，以防有人遇到同样的问题。通过删除 border 简写属性并将其替换为 border-style 和 border-width 解决了该问题。

这是我之前的代码，不起作用：

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