字体真棒加载，但不能在Internet Explorer 11上工作？

Question

Font Awesome图标在Internet Explorer 10中正常呈现，但在IE 11中没有呈现。

下面是Player-status.component.html（使用模态页面），将div＆gt; id＆gt;状态作为html元素this._elementRef.nativeElement.querySelector（＆＃39; #status＆＃39;）。

你可以参考player-status.component.ts.Instead of id（#status）如果我拿窗口对象然后字体真棒正常工作但是其他功能正在破坏。

所有这些功能都在使用chrome，firefox，IE 10但不在IE 11中。但是IE 11以某种方式阻止执行这个字体真棒类 - ＆gt; fixed-action-btn水平点击切换。

我已经完成了所有与IE相关的问题，字体很棒，但似乎没有任何效果。我已经花了2天时间。如果有人遇到过这种问题，请帮忙。

播放器-status.component.html

<div materialize="modal" [materializeActions]="modalActions" [materializeParams]="[{dismissible: true}]" id="status" class="modal bottom-sheet iscroll-wrapper"
  iscroll>
  <div class="modal-content iscr`enter code here`oll-scroller">

    <div class="row">
      <div class="col s4">
        <h5 class="app-colour">Question Status <span class="new badge blue" data-badge-caption="">Filter | {{getFilterSetting()}}</span></h5>
      </div>
      <div class="col s8">
        <div class="fixed-action-btn horizontal click-to-toggle">
          <a class="app btn-floating btn-large app-background-colour custom-btn ">
            <i class="fa fa-filter white-text" ></i>
          </a>
          <ul>
            <li class="tooltipped" data-position="bottom" data-delay="50" data-tooltip="Marked For Review"><a class="btn-floating app-background-colour custom-btn" (click)="setQuestionSelection('1')"><i
              class="fa fa-bookmark white-text"></i></a></li>
            <li class="tooltipped" data-position="bottom" data-delay="50" data-tooltip="Answered"><a class="btn-floating app-background-colour custom-btn" (click)="setQuestionSelection('2')"><i
              class="fa fa-check-square-o white-text"></i></a></li>
            <li class="tooltipped" data-position="bottom" data-delay="50" data-tooltip="Not Answered"><a class="btn-floating app-background-colour custom-btn" (click)="setQuestionSelection('3')"><i
              class="fa fa-square-o white-text"></i></a></li>
            <li class="tooltipped" data-position="bottom" data-delay="50" data-tooltip="Show All"><a class="btn-floating app-background-colour custom-btn" (click)="setQuestionSelection('0')"><i
              class="material-icons white-text">subject</i></a></li>
          </ul>
        </div>
      </div>
    </div>
    <ul class="collection">
      <ng-container *ngFor="let question of qpService.items | customFilter: questionSelection let i = index;">

        <li class="collection-item avatar">
          <div *ngIf="question?.length > 0">"No matches"</div>


          <div *ngIf="!question.isMultipleInteraction">
            <i class="material-icons circle blue grey lighten-2" >check_circle</i>
            <span class="title black-text" >Question {{ question.slNo }}</span>

            <div>
              <div class="question-detail" [innerHTML]="question.title | sanitizeHtml">
              </div>
            </div>


            <p class="blue-grey-text" *ngIf="question.status.answered">
              <span class="grey-text">Your answer:</span> <span [innerHTML]="(question.answers[question.status.selectedAnswer]?.title)|sanitizeHtml"></span>
            </p>
            <p class="grey-text" [hidden]="question.status.answered">Not yet answered</p>
            <span class="secondary-content hide" [hidden]="!question.status.answered"><i class="material-icons green-text" [ngClass]="{'green-text': question.status.wasCorrect, 'red-text': !question.status.wasCorrect}">{{ question.status.wasCorrect ? 'check': 'close' }}</i></span>


          </div>
          <div *ngIf="question.isMultipleInteraction">
            <i class="material-icons circle blue grey lighten-2" >check_circle</i>
            <span class="title black-text" >Question {{ question.slNo }}</span>

            <div>
              <div class="question-detail" [innerHTML]="question.qMainBody | sanitizeHtml">
              </div>
            </div>
            <div class="row" *ngFor="let childQuestion of question.playerItemChild; let j = index">
              <i class="material-icons circle blue grey lighten-2" [hidden]="question.status.answered">check_circle</i>
              <span class="title black-text" [hidden]="question.status.answered">Question {{ question.slNo }}.{{childQuestion.slNo}}</span>

              <div>
                <div class="question-detail" [innerHTML]="childQuestion.title | sanitizeHtml">
                </div>
              </div>


              <p class="blue-grey-text" *ngIf="childQuestion.status.answered">
                <span class="grey-text">Your answer:</span> <span [innerHTML]="childQuestion.answers[childQuestion.status.selectedAnswer]?.title | sanitizeHtml"></span>
              </p>
              <p class="grey-text" [hidden]="childQuestion.status.answered">Not yet answered</p>
              <span class="secondary-content hide" [hidden]="!childQuestion.status.answered"><i class="material-icons green-text" [ngClass]="{'green-text': childQuestion.status.wasCorrect, 'red-text': !childQuestion.status.wasCorrect}">{{ childQuestion.status.wasCorrect ? 'check': 'close' }}</i></span>


            </div>

          </div>
        </li>

      </ng-container>

    </ul>
    <ul class="collection" *ngIf="(qpService.items | customFilter: questionSelection).length < 1"> 
      <li class="collection-item avatar">        
        <i class="fa fa-exclamation-triangle circle"></i>
        <span class="title black-text">Questions not found.</span>
        <a href="#!" class="secondary-content"></a>
      </li>

    </ul>

    <div class="spacing">
      &nbsp;
    </div>
  </div>
  <div class="done-button modal-footer">
    <span class="modal-action modal-close waves-effect waves-green btn-flat" (click)="closeModal()">Done</span>
  </div>
</div>

播放器状态-component.ts

import { AfterContentInit, Component, ElementRef, EventEmitter, Input, OnDestroy, Output } from '@angular/core';
import { MaterializeAction } from 'angular2-materialize';

import { QPService } from './../services/qp.service';
import { Unsubscriber } from './../../../shared/unsubscriber';
import { CustomFilter } from './customFilter';
import { QuestionOptions, QUESTIONS_VALUES } from "./question_status_options";
import { Observable } from "rxjs/Observable";
import { SanitizeHtmlPipe } from './../card/SanitizeHtmlPipe';
import { AfterViewInit } from '@angular/core/src/metadata/lifecycle_hooks';


declare var IScroll: any;
declare var $: any;
@Component({
  selector: 'app-player-status',
  templateUrl: './player-status.component.html',
  styleUrls: ['./player-status.component.css'],
  providers: [CustomFilter]
})
export class PlayerStatusComponent extends Unsubscriber implements AfterViewInit, OnDestroy {

  @Output() public modalActions = new EventEmitter<string | MaterializeAction>();


  private _players: any = [];
  private _modal: HTMLElement = null;
  // private _modal1: HTMLElement = null;
  private _scroll = null;
  public questions: Observable<any[]>;
  private _questionSelection: any;


  public statuses: QuestionOptions[] = QUESTIONS_VALUES;

  constructor(private _qpservice: QPService, private _elementRef: ElementRef) {
    super();

    this._questionSelection = "0";
  }



  get questionSelection() {
    return this._questionSelection;
  }

  set questionSelection(value) {

    this._questionSelection = value;
  }

  public setQuestionSelection(value) {
    this.questionSelection = value;
    this.refreshScroll();
  }

  public getFilterSetting() {
    // console.log("I am here");
    let value = "";
    if (this.questionSelection === '0') {
      value = " None ";
    }
    else if (this.questionSelection === '1') {
      value = " Marked For Review ";
    }
    else if (this.questionSelection === '2') {

      value = " Answered ";
    }
    else if (this.questionSelection === '3') {
      value = " Not Answered ";
    }

    return value;
  }

  public ngAfterViewInit() {
    this._modal = this._elementRef
      .nativeElement
      .querySelector('#status');
      // this._modal1=this._elementRef
      // .nativeElement
      // .querySelector(window);// This is rendering well and working with font awesome classes on internet explorer 11

      (function () {
        function handleMouseWheel(e)
        {
        if (!e) e = this._modal.event;

        if (this._modal.addEventListener) {
          // console.log("I am here");
          this._modal.addEventListener("DOMMouseScroll", handleMouseWheel, false); }
          else { document.onmousewheel = handleMouseWheel; }
        }
    })();
    this._scroll = new IScroll(this._modal, {
      deceleration: 0.01,     
      mouseWheel: true,
      mouseWheelSpeed: 30,
      resizePolling:60,
      probeType: 2,
      freeScroll:true,
      scrollbars: true,
      interactiveScrollbars:true,
      // scrollX: true,
      scrollY: true,
      tap: false,
      click: true
    });

    let onActivateQuestion = this._qpservice
      .onActivateQuestion
      .subscribe(() => {
        this.refreshScroll();
      });

    this.disposal.push(onActivateQuestion);
    //this.disposal.push(onCompleted);
  }

  public refreshScroll() {

    this._modal.style.display = 'initial';
    //console.log("--refreshScroll");
    setTimeout(() => {
      this._modal.style.display = 'hidden';
      this._scroll.refresh();
    });
  }


  public openModal() {
    this.modalActions.emit({ action: 'modal', params: ['open'] });
  }

  public closeModal() {
    this.modalActions.emit({ action: 'modal', params: ['close'] });
  }

  get qpService() {
    return this._qpservice;
  }

}

玩家status.component.css

:host {
  overflow-y: auto;
}

.modal {
  overflow-y: auto;

}

.modal-content {
  z-index: 5003;
}

.modal.bottom-sheet {
  max-height: 100%;
}

@media (min-height: 739px) {
  div.modal.bottom-sheet {
    max-height: 60%;
  }
}

.modal.bottom-sheet .modal-footer {
  display: initial;
}

.modal.bottom-sheet.open .modal-footer {
  display: initial;
}

audio {
  display: none;
}

.play-button {
  cursor: pointer;
}

.done-button {
  z-index: 9003;
  position: fixed;
  right: 0;
  bottom: 0;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  border-top: 1px solid rgba(96, 125, 139, 0.45);
}

.collection .collection-item.avatar {
  min-height: 65px;
}

.custom-btn{
  box-shadow:none;

}

.app-background-colour:hover{
background-color: #D67F45;
}

.fixed-action-btn {  
  position: absolute;
  right: 23px;
  padding-top: 2px;
  margin-right: 1px;
  margin-bottom: auto;
  bottom:auto;
  z-index: 998;
  display: block;
}
.spacing {
  padding: 4px 6px;
  height: 40px;
  width: 100%;
}

span.badge{
  float: none;
  margin-left: 0px;
}

预期结果

实际结果