ボーダーイメージグラデーションはIE10では機能しませんか？

Question

私のdiv "Border"にはいくつかのルールがあります。他のすべてのブラウザでは動作しますが、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

あなたはIE10をエミュレートするように設定メタタグを持っていると述べました。

ボーダー画像はIE10ではサポートされていません。IE11のみです。 （http://caniuse.com/border-image/embed/で確認できます。）

IE10をエミュレートするようにIE11を設定すると、ボーダー画像のサポートが停止します。

この問題を解決するには、IE10エミュレーションを削除する必要があります。 IEで明示的に使用可能なモードを使用するように指示するのが最善の方法です。これは次のようにして行うことができます：

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

このメタファの既存のメタタグを交換するだけで、境界画像の問題は解決されます。

ただし、変更する前に、サイトがIE10モードになりたい理由が他にあるかどうかを確認する必要があります。私は何か理由はないと推測していますが、チェックする価値があります。