Question

Safari将border-color:transparent视为重写border-image，而Chrome和Firefox则相反。（如果border-color是不透明或半透明的颜色，Safari与其他人一致。rgba(0,0,0,0)与transparent的行为相同。我不知道IE的用途。）具体来说，这个片段：

#wrapper { background-color: red; }
#test {
  border-width: 10px;
  border-style: solid;
  border-color: transparent;
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAABlBMVEUA//////+xuF6gAAAACklEQVQIHWPADQAAGwABJwptqgAAAABJRU5ErkJggg==");
  border-image-slice: 1 1 1 1;
  background: white;
  background-clip: content-box;
}

<div id="wrapper">
  <div id="test">The border of this box is blue in Chrome and Firefox,
  red in Safari.</div>
</div>

在Chrome和Firefox中的div周围绘制浅蓝色边框，但在Safari中绘制红色边框。

问题：

哪种行为是正确的？
有没有办法强迫Safari表现得像Chrome和Firefox一样？

注意：我只使用Safari 10.0（11602.1.50.0.10），Firefox 48.0.2和Chrome 53.0.2785.116（全部来自OSX 10.11）测试了上述示例，但是它的网站已经展示了同样的行为持续至少一年，所以我不认为这特别是版本特定的。

注2：border-color:transparent是为了不支持border-image的浏览器而存在的。（例如，我仍然关心IE 7到10的真实网站，这是减少的。）建议的解决方案应该在不支持{{1}的浏览器中显示包装器的背景，而不是可见的边框}。

Answer 1

以下是解决该错误的方法：

而不是

border-color:transparent;

使用

border-color:transparent; border-color:initial;

正如您所发现的，Safari确实存在与border-color:transparent相关的错误，但之后添加border-color:initial可以解决Safari中的错误，并且在其他支持边框的浏览器中不会导致任何其他问题 - 图像。

对于不支持border-image的浏览器（恰好只是IE＆lt; = 10），它们碰巧也不支持那里的initial值，因此它们会回退到{{1}并且你没有明显的边框。

这是小提琴：https://jsfiddle.net/L78gL7xc/2/

Answer 2

数目：

答案1

Chrome和FF的行为是正确的行为。

答案2

删除border-color: transparent。

或

（IE的更新答案）使用border-color（有关支持检查 - can i use border-color?）

＆＃13;

#wrapper { background-color: red; }
#test {
  border-width: 10px;
  border-style: solid;
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAABlBMVEUA//////+xuF6gAAAACklEQVQIHWPADQAAGwABJwptqgAAAABJRU5ErkJggg==");
  border-image-slice: 1 1 1 1;
  background: white;
  background-clip: content-box;
}

#test1 {
  border-width: 10px;
  border-style: solid;
  border-color: cyan;
  background: white;
}

＆＃13;

<div id="wrapper">
  <div id="test">The border of this box is blue in Chrome and Firefox,
  red in Safari.</div>
</div>

<br>

<div id="wrapper1">
  <div id="test1">Simply use border-color, this property is supported effectively in all browsers.</div>
</div>

＆＃13;

希望这会以某种方式帮助你。

Answer 3

我不确定你接受的是什么，除了你需要所示代码的等价物并具有良好的兼容性。

就个人而言，我没有如图所示编码我的边框。所以我只是习惯性地使用边框，而MacOS Safari，Chrome，FF，iOS 9，Android和IE 8上似乎都有浅蓝色边框。

＆＃13;

#wrapper { background-color: red; }
#test {
  border: 10px solid transparent;
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAABlBMVEUA//////+xuF6gAAAACklEQVQIHWPADQAAGwABJwptqgAAAABJRU5ErkJggg==");
  border-image-slice: 1 1 1 1;
  background: white;
  background-clip: content-box;
}

＆＃13;

<div id="wrapper">
  <div id="test">The border of this box is blue in Chrome and Firefox,
  red in Safari.</div>
</div>

＆＃13;

Safari与Chrome / Firefox：边框图像与边框颜色

3 个答案:

答案1

答案2