Mat-dialog在IE11中显示其顶部的附加容器

Question

IE11中的Mat-dialog正在显示一个附加（小）白框。在chrome中显示正常（没有框）。请参考最后的截图。

以下是我从IE11中获取的HTML：

    <mat-dialog-container tabindex="-1" class="mat-dialog-container ng-tns-c8-12 ng-trigger ng-trigger-slideDialog ng-star-inserted" id="mat-dialog-7" role="dialog" style="opacity: 1; transform: none;">
      <app-override-schedule-popup class="ng-star-inserted" _nghost-c10="">
        <div class="modal-dialog" _ngcontent-c10="">
          <div class="modal-content" _ngcontent-c10="">
            <div class="modal-header" _ngcontent-c10="">
              <h4 class="modal-title" id="copyerrorModalLabel" _ngcontent-c10="">
                <img class="med-black-alert-icon" src="assets/img/med-black-alert-icon.png" srcset="assets/img/med-black-alert-icon@2x.png 2x, &#10; assets/img/med-black-alert-icon@3x.png 3x" _ngcontent-c10="">
              </h4>
            </div>
            <div class="modal-body" _ngcontent-c10="">
              You’re trying to copy over a schedule to a day that has a conflicting time. Are you sure you want to override this schedule?
            </div>
            <div class="modal-footer" _ngcontent-c10="">
              <button class="btn btn-default cancelbtn" type="button" _ngcontent-c10="">Cancel</button>
              <button class="btn btn-primary continuebtn" type="button" _ngcontent-c10="">Continue</button>
            </div>
          </div>
        </div>
      </app-override-schedule-popup>
    </mat-dialog-container>

以下是chrome的HTML：

    <mat-dialog-container class="mat-dialog-container ng-tns-c7-4 ng-trigger ng-trigger-slideDialog ng-star-inserted" tabindex="-1" id="mat-dialog-2" role="dialog" style="transform: none; opacity: 1;">
      <app-override-schedule-popup _nghost-c9="" class="ng-star-inserted">
        <div _ngcontent-c9="" class="modal-dialog">
          <div _ngcontent-c9="" class="modal-content">
            <div _ngcontent-c9="" class="modal-header">
              <h4 _ngcontent-c9="" class="modal-title" id="copyerrorModalLabel">
                <img _ngcontent-c9="" class="med-black-alert-icon" src="assets/img/med-black-alert-icon.png" srcset="assets/img/med-black-alert-icon@2x.png 2x, 
                assets/img/med-black-alert-icon@3x.png 3x">
              </h4>
            </div>
            <div _ngcontent-c9="" class="modal-body">
              You’re trying to copy over a schedule to a day that has a conflicting time. Are you sure you want to override this schedule?
            </div>
            <div _ngcontent-c9="" class="modal-footer">
              <button _ngcontent-c9="" class="btn btn-default cancelbtn" type="button">Cancel</button>
              <button _ngcontent-c9="" class="btn btn-primary continuebtn" type="button">Continue</button>
            </div>
          </div>
        </div>
      </app-override-schedule-popup>
    </mat-dialog-container>

对话框的HTML代码：

    <div class="modal-dialog" >
      <div class="modal-content">
       <div class="modal-header">
          <h4 class="modal-title" id="copyerrorModalLabel">
               <img src="assets/img/med-black-alert-icon.png" srcset="assets/img/med-black-alert-icon@2x.png 2x, 
              assets/img/med-black-alert-icon@3x.png 3x" class="med-black-alert-icon">
          </h4>
        </div>
        <div class="modal-body">
                You’re trying to copy over a schedule to a 
    day that has a conflicting time. Are you sure 
    you want to override this schedule? 
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default cancelbtn" (click)="cancel()">Cancel</button>
          <button type="button" class="btn btn-primary continuebtn" (click)="continue()">Continue</button>
        </div>
      </div>
    </div>

Chrome屏幕截图：

IE11截图：