我一直在多个设备上测试我的应用程序,刚刚发现我的 CSS 样式之一无法在 Safari 上运行,特别是我的 iPhone 和 iPad。我正在使用 Angular 制作一个待办事项应用程序,并且希望在项目标记为完成时用红线划掉文本。
如果我创建一个新的段落元素并为其指定类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应用到我的班级时完全的。就像我说的,它在我的 Chrome 桌面上运行良好,但在我的 Safari 上却不行。是什么赋予了??
.completed {
text-decoration: line-through;
-webkit-text-decoration-line: line-through;
color: red;
}
我找到了这个文档,但似乎找不到任何有关通过文本装饰的移动 css 语法的其他内容。有谁知道我在哪里可以找到语法?
看起来我需要更具体地了解 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;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)