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

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。）建议的解决方案应该在不支持 [=14= 的浏览器中显示包装器的背景，而不是可见的边框].

Answer 1

答案：

答案 1

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

答案 2

移除border-color: transparent.

或

（IE 的更新答案）使用 border-color（在此处查看支持 - can i use border-color?）

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

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

希望这对您有所帮助。

Answer 2

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

而不是

border-color:transparent;

使用

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

如您所见，Safari 确实存在与 border-color:transparent 相关的错误，但之后添加 border-color:initial 可以绕过 Safari 中的该错误，并且不会在其他支持的浏览器中引起任何其他问题边框图像。

对于不支持 border-image 的浏览器（恰好是 IE <= 10），它们恰好也不支持那里的 initial 值，因此它们会退回到 border-color:transparent 并且您看不到边框。

这是 fiddle：https://jsfiddle.net/L78gL7xc/2/

Answer 3

我不确定你认为什么是正确的，除了你需要显示的代码的等效项并且具有良好的兼容性..

就我个人而言，我不会如图所示对边框进行编码。所以我只是像往常一样使用边框，在 MacOS Safari、Chrome、FF、iOS 9、Android 和 IE 8 上似乎有浅蓝色边框。

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

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

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

Safari vs Chrome/Firefox: border-image vs border-color

css

cross-browser

border-image

答案 1

答案 2