带有背景剪辑的渐变文本：文本 属性 在 Mac Safari 上分手

Question

带背景剪辑的渐变文本 属性 在 Mac Safari 中乱七八糟 http://prntscr.com/mgd5tz。这是我在 span

中的渐变文本代码

.text-grad {
 background: -moz-linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
 background: -webkit-gradient(linear, left top, right top, color-stop(0%, #97c74e), color-stop(100%, #2ab9a5));
 background: -webkit-linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
 background: -o-linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
 background: -ms-linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
 background: linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-one', endColorstr='$color-two',GradientType=1 );
 -webkit-background-clip: text;
 -moz-background-clip: text;
 -ms-background-clip: text;
 -o-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
 -moz-text-fill-color: transparent;
 -ms-text-fill-color: transparent;
 -o-text-fill-color: transparent;
 text-fill-color: transparent;
 opacity: 1;
 z-index: 9;
}

<h2>Lorem ipsum <span class="text-grad"> deep understanding </span> of the project</h2>

Answer 1

添加显示：内联块；可能有用

.text-grad {
  display: inline-block;
 background: -moz-linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
 background: -webkit-gradient(linear, left top, right top, color-stop(0%, #97c74e), color-stop(100%, #2ab9a5));
 background: -webkit-linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
 background: -o-linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
 background: -ms-linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
 background: linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-one', endColorstr='$color-two',GradientType=1 );
 -webkit-background-clip: text;
 -moz-background-clip: text;
 -ms-background-clip: text;
 -o-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
 -moz-text-fill-color: transparent;
 -ms-text-fill-color: transparent;
 -o-text-fill-color: transparent;
 text-fill-color: transparent;
 opacity: 1;
 z-index: 9;
}

   <h2>Lorem ipsum <span class="text-grad"> deep</span> <span class="text-grad">understanding </span> of the project</h2>