边框图像渐变在IE10中不起作用？

Question

I have some rules for my div "Border" It works in all other browsers but not in IE 10. Anybody have any idea why this could be happening? Thank you.

 .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

You said that you have the meta tag set to emulate IE10.

Border images are not supported by IE10, only IE11. (You can confirm here: http://caniuse.com/border-image/embed/ .)

So if you set IE11 to emulate IE10, it will stop supporting border images.

To resolve the problem, you need to remove the IE10 emulation. The best thing to do here is to explicitly tell IE to use it's best available mode. This can be done as follows:

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

Simply swap out your existing meta tag for this one, and the border image problem will be solved.

However, before you make that change you should check to confirm if there is any other reason why your site might have wanted to be in IE10 mode. I'm guessing there isn't any reason, but it's worth checking.