我一直在多个设备上测试我的应用程序,只是发现我的一种 css 样式在 Safari 上不起作用,特别是我的 iPhone 和 iPad。我正在使用 Angular 制作一个待办事项应用程序,并希望在项目标记为完成时用红线划掉文本。
如果我创建一个新的段落元素并对其进行类测试并应用下面的 css,则样式可以正常工作。
例如,这条线被划掉了
<p class="test">testing 3</p>
Run Code Online (Sandbox Code Playgroud)
有了这个 css
.test {
text-decoration: line-through;
-webkit-text-decoration-line: line-through;
color: red;
}
Run Code Online (Sandbox Code Playgroud)
但是,此 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>
Run Code Online (Sandbox Code Playgroud)
当这个 css 应用于我的类时完成 …