Internet Explorer 11 中的 CSS flex

Question

 .search-wrapper { display: flex; margin: 0; } .search-wrapper #toggle-search-button { margin-right: 10px; } .search-wrapper .input-group { flex: 1 1 auto; padding-right: 0; }

 <div class="search-wrapper"> <button class="btn btn-primary" id="toggle-search-button" ng-click="vm.toggleOpenSearchBar()"> <span i18n="common.advancedSearch"></span> <i ng-if="!vm.projectSearchOpen" class="fa fa-arrow-right"></i> <i ng-if="vm.projectSearchOpen" class="fa fa-arrow-left"></i> </button> <div class="input-group input-group-lg"> <span class="input-group-btn"> <button class="btn btn-primary" ng-click="vm.search()" ng-disabled="vm.freeText.length < 2" type="button"><i class="fa fa-search"></i></button> </span> <input class="form-control" id="input-search" placeholder="{{vm.translate.mainSearchPlaceholder | i18n}}" autofocus ng-keypress="vm.keypress($event)" ng-model="vm.freeText" esc-key="vm.reset()"> </div> </div>

它是一個按鈕，旁邊是一個輸入組。 填充整個寬度。 適用於除 IE11 之外的所有瀏覽器。

在 IE11 中，輸入組位於右側的“外部”，與切換搜索按鈕的寬度相同。

我也試過： flex-grow: 1 on input-group。 結果一樣。

有任何想法嗎？

如果不能使用 flex，我該如何替換 flex？

Answer 1

您可以嘗試為輸入搜索元素和 html 正文設置寬度屬性。

代碼如下：

<style>
    body{
        width:95%;
    }
    .search-wrapper {
      display: flex;
      margin: 0;
    }

    .search-wrapper #toggle-search-button {
          margin-right: 10px;
    }

    .search-wrapper .input-group {
          flex: 1 1 auto;
          padding-right: 0;
    }
    .search-wrapper #input-search {
      width:90%;
    }
</style>

輸出是這樣的：