safari中未顯示邊框圖像

border-image未在Safari或平板電腦和移動設備上顯示。在FF，IE，Chrome和Opera中都很好。safari中未顯示邊框圖像

這裏的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; 
}

多一點信息：我使用的是引導v3.0.3。該頁面正在驗證。在FireBug中，邊界正在穿過，顏色，填充，但不是圖像。

來源

2014-01-09 JCooke

您是否使用最新版本的Safari檢查此問題？ Safari在5之前的版本中不支持邊界圖像。儘管最好通過使用-o，-webkit和-moz標記儘可能多地爲更老的瀏覽器添加支持。您可以瞭解如何在w3schools邊框圖像頁面上使用這些標籤。

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

一般來說，你只需要在每個瀏覽器前綴添加到標準的CSS代碼。

來源

2014-01-09 16:11:11 nemesiswho

我放棄了試圖讓邊界圖像正常工作。它不夠好。所以我把它改成了背景圖片，並且工作得很好。

這適用於所有，但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; 
}

這個故事告訴我們，堅持什麼作品直到他們完善了新的東西。

來源

2014-01-10 10:21:16 JCooke

我發現這篇文章，同時尋找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; 
}

來源

2016-10-28 17:05:32 roco15

感謝您的回答，我發現它顯然是「透明」的屬性，使邊框不會出現在Safari中。將其更改爲「繼承」使其發揮作用。 – not2savvy

將顏色更改爲繼承對我也不起作用。但添加一個透明的顏色做了rgba（0,0,0,0.01）。但是需要一個大於0的alpha值。 – dardub

在Safari版本10.1.1無邊框圖像在w3schools.com現在顯示2017年6月。在border-image dot com上有一個邊界圖像生成器（我希望，我可以在這裏提及這個！），這對於Safari來說非常有效，對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;

來源

2017-06-24 10:28:41 Mary

safari中未顯示邊框圖像

回答

相關問題