无法在 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 {&nbsp; all: unset;&nbsp; color: white;&nbsp; -webkit-text-fill-color: white;&nbsp; background-color: darkblue;}<button>button</button>

Answer 2

有趣的。将all: unset所有值重置为其继承值。如果您想要解决方法，您所需要做的就是将其包装在带有白色文本的元素中。下面的代码片段并不理想，但它应该可以在 Safari 中工作。button {&nbsp; all: unset;&nbsp; background-color: darkblue;}.button-wrapper {&nbsp; color: white;}<div class="button-wrapper">&nbsp; <button>button</button></div>