調整 Internet 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>

在谷歌瀏覽器上測試時，它工作得很好，按鈕彼此相鄰。 但在 Internet Explorer 上，“交換”按鈕位於另一個按鈕下方。 我怎樣才能解決這個問題？ ：/

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>