3

Safari treats border-color:transparent as overriding border-image, whereas the opposite is true in Chrome and Firefox. (Safari is consistent with the others if border-color is an opaque or semitransparent color. rgba(0,0,0,0) behaves the same as transparent. I don't know what IE does.) Concretely, this snippet:

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

draws a light blue border around the div in Chrome and Firefox, but a red border in Safari.

Questions:

  1. Which behavior is correct?
  2. Is there any way to force Safari to behave like Chrome and Firefox?

Note: I've only tested the above example with Safari 10.0 (11602.1.50.0.10), Firefox 48.0.2, and Chrome 53.0.2785.116 (all on OSX 10.11) but the website it's cut down from has exhibited the same behavior consistently for at least a year, so I do not believe this is particularly version-specific.

Note 2: border-color:transparent is present for the sake of browsers that don't support border-image. (For instance, I do still care about IE 7 through 10 for the real website this is cut down from.) Proposed solutions should show the background of the wrapper, not a visible border, in browsers that don't support border-image.

4

3 回答 3

4

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

代替

border-color:transparent;

利用

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

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

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

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

于 2016-12-01T01:10:40.713 回答
1

答案：

答案 1

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

答案 2

删除border-color: transparent.

或者

（IE 的更新答案）使用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>

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

于 2016-11-30T14:35:18.713 回答
0

除了您需要显示代码的等效项并且具有良好的兼容性之外，我不确定您接受的是正确的。

就个人而言，我没有如图所示对我的边框进行编码。所以我只是按照我通常的方式使用了边框，并且在 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>

于 2016-12-01T06:08:24.840 回答