CSS - 新的 Firefox 版本不再显示边框图像答案

【问题标题】：CSS - New Firefox-release doesn't show Border-Image anymoreCSS - 新的 Firefox 版本不再显示边框图像
【发布时间】：2012-08-31 00:09:49
【问题描述】：

Firefox 更新后，边框图像不再显示？你可能已经定义了这样的东西：

border-width:30px;
-moz-border-image: url('border.png') 64 64 64 64 stretch stretch;
   -webkit-border-image: url('border.png') 64 64 64 64 stretch stretch;
   -o-border-image: url('border.png') 64 64 64 64 stretch stretch;

【问题讨论】：

标签： html css firefox

【解决方案1】：

我不得不环顾四周才意识到这是 Firefox 问题。首先，我认为 AdBlock 可能只是出于某种原因阻止了它。这实际上是 Mozilla 对他们的 CSS 解释所做的改变。您现在必须在其下方添加此属性才能使其工作：

border-style:solid;

希望我能帮上忙。

【讨论】：

你显然可以帮助自己：+1
进行更改的原因是规范已更改为要求该行为，这是值得的。
你帮了我，我也遇到了同样的问题。

【解决方案2】：

根据规范，Firefox 需要设置border-image-width。

只需包含上述属性。

在这里，border-style 将纠正问题，但为了更合乎逻辑和相关性，最好使用 border-image-width 而不是 border-style 或 border-width 有时。

【讨论】：

@dardub 请检查以下链接！ codepen.io/Yeswanth-JG/pen/JflBk（它也可以在 Firefox 中使用！）

【解决方案3】：

考虑添加：

border: 15px solid transparent;

15px 只是一个例子。

【讨论】：

【解决方案4】：

添加fill:

-webkit-border-image: url(<%= asset_path('wxskvip_head_frame.png') %>) 6 fill stretch;

【讨论】：