无法在 Safari 中设置“全部：取消设置”按钮的文本颜色

Question

是的，可以在里面添加变量style。在你的情况下%应该在引号内。<tr  v-for="task in tasks.data "  v-if=" task.projet_id == key "   :key="task.id">       <td >{{ parseInt(100 * task.progress) }}% <div class="progress">       <div class="progress-bar bg-success" role="progressbar" aria-valuenow="0" :style="         {'width':`${parseInt(100 * task.progress)}%`}"  id="progress"        aria-valuemin="`${parseInt(100 * task.progress)}`" aria-valuemax="100"></div>       </div>             </td>添加样式时不需要包含;，因为样式数据是一个对象，并且将commas像这样分隔:style="{'width':`${parseInt(100 * task.progress)}%`, color:'red'}"期望：“按钮”一词应在深蓝色背景上以白色显示。实际：在 Safari 中（仅？！），“按钮”一词在深蓝色背景上显示为黑色，难以辨认。这里出了什么问题？这是我的错吗？有解决方法吗？

Answer 1

这是 Safari 中的一个已知错误。https://bugs.webkit.org/show_bug.cgi?id=158782自 2016 年以来一直开放。

发生这种情况是因为“all: unset”将 -webkit-text-fill-color 设置为黑色，并且覆盖了颜色。

-webkit-text-fill-color您可以通过设置所需的颜色来解决这个问题。希望他们有一天能修复这个错误！

button {

  all: unset;

  color: white;

  -webkit-text-fill-color: white;

  background-color: darkblue;

}

<button>button</button>

Answer 2

有趣的。将all: unset所有值重置为其继承值。

如果您想要解决方法，您所需要做的就是将其包装在带有白色文本的元素中。下面的代码片段并不理想，但它应该可以在 Safari 中工作。

button {

  all: unset;

  background-color: darkblue;

}

.button-wrapper {

  color: white;

}

<div class="button-wrapper">

  <button>button</button>

</div>