邊框圖像漸變在IE10中不起作用？

Question

我的div“邊框”有一些規則，它可以在所有其他瀏覽器中使用，但在IE 10中不起作用。有人知道為什么會發生這種情況嗎？ 謝謝。

 .border { background: white; border: 8px solid transparent; -moz-border-image: -moz-linear-gradient(top left, white 50%, #3a4ed5 100%); -webkit-border-image: -webkit-linear-gradient(top left, white 50%, #3a4ed5 100%); border-image: linear-gradient(to bottom right, white 50%, #3a4ed5 100%); border-image-slice: 1; } .border { background-color: white; display: block; height: 50px; width: 150px; text-align: center; transform: skewX(-15deg); } 

 <div class="border"> <div> 

Answer 1

您說您已將meta標簽設置為模擬IE10。

IE10不支持邊框圖像，僅IE11不支持。 （您可以在此處進行確認： http : //caniuse.com/border-image/embed/ 。）

因此，如果將IE11設置為模擬IE10，它將停止支持邊框圖像。

要解決此問題，您需要刪除IE10仿真。 最好的做法是明確告訴IE使用它的最佳可用模式。 可以按照以下步驟進行：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

只需將您現有的meta標簽換成該標簽，邊框圖像問題即可解決。

但是，在進行更改之前，您應該檢查以確認是否還有其他原因導致您的站點可能希望處於IE10模式。 我猜沒有任何原因，但是值得檢查。