IE11中的边界图像透明度错误

Question

我在元素上使用border-image属性，并将图像文件设置为边框背景。边框图像文件具有透明度，它可以在Chrome和Firefox中使用。

然而，在IE11中，透明区域“覆盖”边框下的背景图像。有办法解决吗？我在具有各种背景图像的元素上使用相同的边框图像，因此我不想为每个图像创建单独的非透明边框图像。

这是我到目前为止所做的：

body {
background: #000;  
}

div {
  background-image: url(http://i.stack.imgur.com/7dzt1.jpg);
  border-image: url(http://i.stack.imgur.com/Zf544.png) 14 round;
  width: 300px;
  height: 80px;
  border-style: solid;
  border-width: 14px;
  border-radius: 5px;
}

<div></div>

渲染比较

border-image文件：

background-image文件：

Answer 1

定义border-image-width而不是border-width解决了IE11中的问题。如果您想设置后备，border-style: dashed似乎可以提供更一致的行为。

这似乎是错误行为，但可能是浏览器行为的一个简单差异：

• 在Chrome中，border-width: 14px 每边增加14px ，并且没有 border-style。设置border-style后，border-image-width无效。

• 在IE11中，border-width: 14px每边不添加14px，除非设置了border-style。 border-style会影响border-image的定位，但仅限于设置为solid。

来自IE11的截图

工作示例

＆＃13;

＆＃13;

div {
  background-image: url(http://i.stack.imgur.com/7dzt1.jpg);
  border-image: url(http://i.stack.imgur.com/Zf544.png) 14 round;  
  border-image-width: 14px;
  width: 300px;
  height: 80px;
  border-radius: 5px;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;