调整 Internet Explorer 11 中的按钮（CSS、HTML、Bootstrap）

Question

I have the following Code written in HTML and 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>

While testing it on Google Chrome, it works just fine and the buttons are as intended next to each other. On Internet Explorer though, the Swap button is underneath the other button. How can I fix this? :/

Answer 1

It works as expected on on IE/EDGE v11 and chrome.

Can you confirm the IE version used.

I used IE 11 to test your code all looks fine..

Answer 2

Is there any other CSS style? Which version of Bootstrap and angular version are you using? I have test your code on my side using Bootstrap 4 version, it seems that everything work well on my side(using IE11). Can you post enough code to reproduce the problem? And, you could also F12 developer tools to check the html resource and CSS style(especially the button and it's container's width property).

Besides, you can also change the following code:

<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>

to

<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>