-webkit-text-fill-color：透明；在Safari 7.1.7中不起作用 [英] -webkit-text-fill-color: transparent; not working in Safari 7.1.7

问题描述

我有几个li的ul。

我在ul上使用此ID。

I use this id on the ul.

#list {
margin-right: auto;
margin-left: auto;
width:500px;
color:black;
background: -webkit-linear-gradient(#000, #909090);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}

ul的内容在Chrome中可以很好地进行渐变处理，但在Safari中则不能。在Safari中，所有li都是不可见的。如果我检查然后禁用 -webkit-text-fill-color：transparent;，则文本将变得可见，尽管没有渐变（显然）。

The contents of the ul receive a gradient treatment just fine in Chrome but not Safari. In Safari, all of the li are "invisible". If I inspect and then disable the "-webkit-text-fill-color: transparent;", the text will become visible albeit without the gradient (obviously).

？

这是JSfiddle： https://jsfiddle.net / s96bzcua /

Here is the JSfiddle: https://jsfiddle.net/s96bzcua/

亲切的问候，

推荐答案

我有同样的问题。原来是由于display属性。不论出于何种原因，Safari都需要将显示设置为内联或内联块，而不是内联-flex。

I had this same issue. Turns out it was due to the display property. For whatever reason, Safari needs the display set to "inline" or "inline-block", but not "inline-flex".

所以对我而言，这意味着更改：
显示：flex;
收件人：
显示：内联；

So for me this meant changing From: display: flex; To: display: inline;

这篇关于-webkit-text-fill-color：透明；在Safari 7.1.7中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！