在IE11中使用border-image（with slice）？ [英] Using border-image (with slice) in IE11?

问题描述

我所做的工作是在Chrome浏览器中，目前我有替代的CSS在其他浏览器（box-shadow代替）使用IE和Firefox特定的媒体查询来满足每一个（一个faff，但必要）。

What I have is working spiffingly in Chrome and at the moment I have alternative CSS in place for other browsers (box-shadow instead) using IE and Firefox specific media queries to cater for each one individually (bit of a faff but necessary).

我试图使用css3pie获取边框图像工作，因为我知道它不支持IE，它工作了一点（填充没有工作），但只能到使用IE Emulation的IE10。

I have tried to use css3pie to get the border-image to work as I know it was not supported by IE, which worked a little (fill didn't work) but only up to IE10 using the IE Emulation .

我在这里边框图像现在支持IE11，但我不能让它工作。有人可以告诉我我失踪了什么？

I read on here that border-image is now supported on IE11 but I can't get it to work. Can someone tell me what I'm missing?

#header_right{
            border-width: 20px 0 20px 0;
            border-image: url(../../img/bordernew.png)50 0 50 0 repeat;
            -webkit-border-image: url(../../img/bordernew.png)50 0 50 0 repeat;
            -moz-border-image: url(../../img/bordernew.png)50 0 50 0 repeat;
            border-image-slice: 50 0 50 0 fill;
            border-image-width: 20 0 20 0;
            }

我从我最初试图在Chrome上执行该操作时创建了一段代码：语法是有点不同（类而不是ID等），但效果是一样的 - 所有在Chrome中，在IE11没有什么。

I made a snippet from when I was originally trying to do it on Chrome - the syntax is a little different (classes instead of ID etc.) but the effect is the same - all good in Chrome, nothing in IE11.

这不是结束世界就像我说我有其他选择，但我真的希望它出现在所有浏览器上，如果可能的话。

It's not the end of the world as like I said I have alternatives in place, but I'd really like it to appear consistently on all browsers if possible.

任何帮助，已经尝试了我可以想到的一切，以及在这里和每一个Google搜索结果中我已经建议的一切。

Any help appreciated, I've already tried everything I can think of and everything that has already been suggested on here and in every Google result I could find.

感谢

body {
    background-image: url("http://s27.postimg.org/7uqejz1sz/mad_scientist.jpg");
}
.border {
  border-width: 20px 0 20px 0;
  border-image: url(http://s28.postimg.org/uau8kjl4d/bordernew.png) 50 0 50 0 repeat;
  -webkit-border-image: url(http://s28.postimg.org/uau8kjl4d/bordernew.png) 50 0 50 0 repeat;
  -moz-border-image: url(http://s28.postimg.org/uau8kjl4d/bordernew.png) 50 0 50 0 repeat;
  border-image-slice: 50 0 50 0 fill;
  border-image-width: 20 0 20 0;
  width: 100%;
  height: 60px;
}
.p {
  font-weight: bold;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

<div class="border" style="text-align:center;">
  <br />
  <span class="p">Coming soon...</span>
  <br />
  <br />
</div>

推荐答案

Ah - 最后通过添加 border-style：solid 在Firefox中也可以工作！

Ah - finally fixed simply by adding border-style:solid! Works in Firefox with that too!

这篇关于在IE11中使用border-image（with slice）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！