html - 在 IE11 中使用边框图像(带切片)？

Question

我所拥有的是在 Chrome 中出色地工作，目前我有其他浏览器的替代 CSS(代替 box-shadow)，使用 IE 和 Firefox 特定的媒体查询来单独满足每个浏览器的需求(有点愚蠢但必要).

我曾尝试使用 css3pie 使边框图像正常工作，因为我知道 IE 不支持它，它工作了一点(填充不起作用)但只能使用 IE Emulation 到 IE10。

我阅读了here IE11 现在支持 border-image，但我无法让它工作。有人可以告诉我我缺少什么吗？

#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 中没有。

这不是世界末日，就像我说的那样，我有替代方案，但如果可能的话，我真的希望它能在所有浏览器上一致显示。

感谢任何帮助，我已经尝试了我能想到的一切，以及这里和我能找到的每一个谷歌结果中已经建议的一切。

谢谢

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>

Answer 1

啊 - 终于通过添加 border-style:solid 修复了!也适用于 Firefox!