html - Safari 不渲染 css 渐变文本

Question

我正在尝试使用此 CSS 代码在 webkit 浏览器中制作渐变文本:

.text {
    background: -webkit-linear-gradient(blue, green);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

它在 Chrome 中完美运行，但在 Safari(8 和 9)中它不会呈现渐变文本，除非您通过鼠标单击并在其上拖动来选择它。

HTML如下:

<p class = "text">Hello world.</p>

为此花了 2 个晚上。发现了很多使用这种方法的建议，但有几个问题与我的类似，但根本没有解决方案。如果有人愿意提供帮助，将不胜感激。

重要更新:

我发现，这段代码在应用于单个 <p> 时效果很好元素，但在应用于单个或多个 div 包装器时无法在 Safari(不是 chrome)中呈现 <p>像这样的元素:

<div class = "text">    
   <p>First line.</p>
   <p>Second, way longeeeeeeer line. </p>
   <p>Third line, just to see gradient span over multiple lines. </p>
</div>

有没有想过为什么会这样或者如何克服这个问题？

Answer 1

我找到了一个简单的解决方法

.text, span {
 display: block;
}