Настройте кнопки в Inte rnet Explorer 11 (CSS, HTML, Bootstrap)

Question

У меня есть следующий код, написанный на HTML и Angular:

<form [formGroup]="form">
  <div class="modal-header">
    <span class="modal-title">...</span>
    <button type="button" class="close" aria-label="Close" (click)="dismiss()">
      <fa-icon class="option-svg" icon="times"></fa-icon>
    </button>
  </div>
  <div class="modal-body">
    <div class="row form-group mt-3">
      <div class="col-12">
        <div>
          <p>...</p>
        </div>
        <div>
          <div class="col-6 form-group">
            <select class="form-control" formControlName="selectedReason"
                    id="selectedReason" name="selectedReason">
              <option *ngFor="let option of reasons" [ngValue]="option.text">{{option.text}}</option>
            </select>
          </div>
        </div>
        <div *ngIf="isOther()">
          <div class="col-sm-6 col-lg-12">
            <input class="form-control" id="other" type="text" aria-describedby="other" formControlName="other">
          </div>
        </div>
      </div>
    </div>
    <div class="row form-group">
      <div class="col-12">
        <p class="warning-message">Wollen Sie das Image wirklich produktiv schalten?</p>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <div class="row form-group">
      <div class="col-6">
        <button type="button" class="btn btn-secondary" (click)="dismiss()">Cancel</button>
        <button type="button" class="btn btn-primary" (click)="close()" id="swapImage">Swap</button>
      </div>
    </div>
  </div>
</form>

Во время тестирования в Google Chrome, он работает просто отлично, и кнопки расположены так, как задумано, рядом друг с другом , В Inte rnet Explorer кнопка Swap находится под другой кнопкой. Как я могу это исправить? : /

Answer 1

Это работает как положено включено в IE / EDGE v11 и chrome.

Можете ли вы подтвердить IE версию использованную.

Я использовал IE 11, чтобы проверить ваш код, все выглядит нормально ..

Answer 2

Есть ли другой стиль CSS? Какую версию Bootstrap и angular версии вы используете? Я протестировал ваш код на своей стороне, используя Bootstrap 4 версию, кажется, что все работает хорошо на моей стороне (используя IE11). Можете ли вы опубликовать достаточно кода, чтобы воспроизвести проблему? Кроме того, вы также можете использовать инструменты разработчика F12 для проверки ресурса html и стиля CSS (особенно кнопки и свойства ширины контейнера).

Кроме того, вы также можете изменить следующий код:

<div class="row form-group">
  <div class="col-6">
    <button type="button" class="btn btn-secondary" (click)="dismiss()">Cancel</button>
    <button type="button" class="btn btn-primary" (click)="close()" id="swapImage">Swap</button>
  </div>
</div>

до

<div class="row form-group">
  <div class="col-3">
    <button type="button" class="btn btn-secondary" (click)="dismiss()">Cancel</button>
  </div>
  <div class="col-3">
    <button type="button" class="btn btn-primary" (click)="close()" id="swapImage">Swap</button>
  </div>
</div>