Question

边框图像未显示在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中，边框正在通过，颜色，填充，但不是图像。

Answer 1

我在寻找Safari 10.0相同问题的解决方案时发现了这篇文章。我能够找到一个解决方案，并希望分享它，以防有人遇到同样的问题。通过删除边框速记属性并将其替换为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;
}

Answer 2

在Safari版本10.1.1中，2017年6月在w3schools.com上没有显示边框图像。在border-image dot com上有一个边框图像生成器（我希望，我可以在这里提到它！），至少对于Safari来说效果很好，对于mac来说这是一个很好的ff。我的例子：

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;

Answer 3

您是否使用最新版本的Safari查看此内容？ Safari在5之前的版本中不支持边界图像。老实说尽管最好通过使用-o，-webkit和-moz标记为尽可能多的旧浏览器添加支持。您可以在w3schools border-image页面上找到如何使用这些标签。

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

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

Answer 4

我放弃了尝试让边框图像正常工作。它的支持不够好。因此，我将其更改为背景图像并使其正常工作。

这适用于除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;
}

故事的道德，坚持一切有效，直到他们完善了新的东西。

Answer 5

我使用的是随机颜色，而不是透明的或继承的，并且可以在野生动物园中使用。

边框图像刚刚覆盖了我设置的图像。如果边框图像在较旧的浏览器上无法显示，我仍然会使用良好的后备颜色。

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

边境图像没有在野生动物园中显示

5 个答案: