Неправильная стилизация приложения Angular 7 в Safari, Opera & IE, в Chrome, Firefox, Vivaldi & Edge - PullRequest
Новая
       28

Неправильная стилизация приложения Angular 7 в Safari, Opera & IE, в Chrome, Firefox, Vivaldi & Edge

0 голосов
/ 01 мая 2019

Я работаю над приложением для работы на компьютерах Mac и Windows.

Я использую * ngFor для циклического просмотра списка пунктов меню, к которым прикреплены значки.Я поместил класс в каждый отдельный элемент меню, чтобы я мог их стилизовать. 

Parent Component
<app-application-action class="side-nav__item" fxFlex *ngFor="let action of actions" [showTitle]=true
    [action]="action">
</app-application-action>

Child Component (<app-application-action>)
 <div fxLayout="row" fxFlex class="action-nav__icon-box" fxLayoutAlign="start center">

 <div [ngSwitch]="IconType" fxFlex="nogrow">

  <span fxFlex="nogrow" *ngSwitchCase="0" class="{{ Icon }}"></span>

  <svg fxFlex="nogrow" *ngSwitchCase="1" class="action-nav__icon">
   <use [attr.xlink:href]="Icon"></use>
  </svg>
 </div>

 <div *ngIf="showTitle" fxFlex class="action-nav__title"> 
  <span *ngIf="Count !== undefined" class="action-nav__notification">{{Count}}</span>
  <span>{{Title}}</span>
 </div>
</div>

Стили 

.side-nav__item {
padding-bottom: .7rem;
}

.action-nav__icon {
width: 2.3rem;
}

Это приводит к следующему.Первый - это Chrome / Vivaldi / FireFox / Edge, второй - Safari & Opera.У IE есть дополнительные проблемы, так как я даже не могу открыть ящик sidenav для материала (это отдельная проблема). menu on Chrome/FF/Vivaldi/Edge menu on Safari/Opera & IE

Почемустили не работают правильно в Safari & IE?Как я могу создать правила CSS, которые вступают в силу только в выбранном браузере?

РЕДАКТИРОВАТЬ: Я обнаружил, что содержащий div имеет flexbox, созданный пакетом flex-layout npm.Если я отключу отображение flex в редакторе CSS Safari, меню будет выглядеть так же, как в Chrome.Поэтому теперь мне нужно понять, как решить эту проблему, и она должна работать.

Я не могу создать Blitz, потому что слишком много информации о клиенте, чтобы ее можно было извлечь.

1 Ответ

0 голосов
/ 01 мая 2019

Polyfills - это несколько строк кода, которые делают ваше приложение совместимым с различными браузерами.Код, который мы пишем, в основном написан на ES6 («Новые возможности: обзор и сравнение») и не совместим с IE или Firefox, и для его просмотра или использования в этих браузерах требуются некоторые настройки среды.

Polyfills.ts был предоставлен angular, чтобы помочь вам избавиться от необходимости специально настраивать все.

С Docs

Angular построен по последним стандартам веб-платформы.Ориентация на такой широкий спектр браузеров является сложной задачей, поскольку они не поддерживают все функции современных браузеров.

Подробнее here

...