边框图像不显示在safari [英] border image not showing in safari
问题描述
border-image不会显示在Safari或平板电脑和行动装置上。
border-image not showing up in Safari or on tablet and mobile devices. It's fine in FF, IE, Chrome and 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的边框是通过,颜色,填充,而不是图像。
A little more information: I'm using Bootstrap v3.0.3. The page is validating. In FireBug the borders are being brought through, colour, padding, but not the image.
推荐答案
我发现这篇文章,一个解决方案与Safari 10.0相同的问题。我能够找到一个解决方案,并想分享它,以防万一有同样的问题。
I found this post while looking for a solution for the same problem with Safari 10.0. 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.
这里是我的代码之前,不工作:
Here is my code before, NOT working:
.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;
}
这篇关于边框图像不显示在safari的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!