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

标签： cssinternet-explorerflexbox

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>

输出如下：