Question

我所拥有的是在Chrome中孜孜不倦地工作，目前我已经为其他浏览器设置了替代CSS（使用了box-shadow），使用IE和Firefox特定的媒体查询来单独满足每个浏览器的需要（一点点但是必要的））。

我曾尝试使用css3pie来使border-image工作，因为我知道IE不支持它，它工作了一点（填写没有工作）但只使用IE仿真的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中没有。< / p>

这不是世界的尽头，就像我说我有替代品一样，但我真的希望它尽可能在所有浏览器上显示。

任何帮助表示赞赏，我已经尝试了所有我能想到的内容，以及我在这里以及每个Google搜索结果中已经提出的所有建议。

由于

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

啊 - 最后通过添加border-style:solid来解决！也适用于Firefox！

在IE11中使用border-image（带切片）？

1 个答案: