通过 css 的文本修饰线在我的 "completed" class 上无法在 Safari 上运行

Question

我一直在多个设备上测试我的应用程序，刚刚发现我的 css 样式之一在 Safari 上不起作用，特别是我的 iPhone 和 iPad。我正在使用 Angular 制作待办事项应用程序，并希望在项目标记为已完成时用红线划掉文本。

如果我创建一个新的段落元素并为其提供 class test 并应用下面的 css，则样式可以正常工作。

例如，这条线被划掉了

<p class="test">testing 3</p>

有了这个css

.test {
  text-decoration: line-through;
  -webkit-text-decoration-line: line-through;
  color: red;
}

但是，这个html没有被划掉

  <li *ngFor="let list of lists" [class.completed]="list.completed" class="list-lines">
    <table>
      <tr>
        <td class="check">
          <input id='checked' *ngIf="list.completed === false" type="checkbox" (click)='isChecked(list)'>
          <input id='checked' *ngIf="list.completed === true" type="checkbox" (click)='isChecked(list)' checked>
        </td>
        <td class="todoBox">
          <span class="todo" (click)="isChecked(list)">{{list.item}}</span>
        </td>
        <td>
          <button id="delOneButton" class="btn btn-danger" (click)="delOne(list)" [hidden]="!list.completed">Delete</button>
        </td>
      </tr>
    </table>
  </li>

当这个 css 应用于我的 class 完成。就像我说的，它在我的 Chrome 桌面上运行良好，但在我的 Safari 上却不行。给了什么？？

.completed {
  text-decoration: line-through;
  -webkit-text-decoration-line: line-through;
  color: red;
}

我找到了这个文档，但似乎找不到任何关于移动 css 文本修饰行语法的其他信息。有谁知道我在哪里可以找到语法？

Answer 1

开始 -webkit-text-decoration-line: line-through; 更多相关信息，您可以阅读 here。希望这有帮助:)

Answer 2

看来我需要更具体地使用 webkit css。而不是

.completed {
  text-decoration: line-through;
  -webkit-text-decoration-line: line-through;
  color: red;
}

我需要写

.completed .todoBox .todo {
  text-decoration-line: line-through;
  -webkit-text-decoration-line: line-through;
  text-decoration-color: red;
  -webkit-text-decoration-color: red;
}

Answer 3

这在 Safari 和 Google Chrome 中对我有用。

.test{
     text-decoration: line-through red;
     -webkit-text-decoration: line-through red;

}

通过 css 的文本修饰线在我的 "completed" class 上无法在 Safari 上运行

Text decoration line through css does not work on Safari with my "completed" class

css

safari

mobile-safari