Линия оформления текста через css не работает в Safari с моим "завершенным" классом - PullRequest
Новая
       9

Линия оформления текста через css не работает в Safari с моим "завершенным" классом

0 голосов
/ 05 июля 2018

Я тестировал свое приложение на нескольких устройствах и только что обнаружил, что один из моих стилей 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>

Когда этот класс применяется к моему классу завершено . Как я уже сказал, он отлично работает на моем рабочем столе с Chrome, но не на моем Safari. Что дает ?? 

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

Я нашел эту документацию, но, похоже, больше ничего не могу найти в синтаксисе мобильного CSS для оформления строки текста. Кто-нибудь знает, где я могу найти синтаксис?

enter image description here

Ответы [ 2 ]

0 голосов
/ 10 июля 2018

Похоже, мне нужно было быть более конкретным с 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;
}
0 голосов
/ 07 июля 2018

Здесь мы идем -webkit-text-decoration-line: line-through; больше информации об этом вы можете прочитать здесь . Надеюсь, что это поможет:)

...