如何修复IE 11中Bootstrap 4的Flexbox列等高及图片显示问题？

IE11对Bootstrap 4的Flexbox支持确实有不少坑，我帮你梳理几个针对性的修复方案，解决你遇到的等高失效、图片自适应异常和可点击空白区域问题：

1. 修复.d-flex等高失效问题 #

IE11在嵌套Flex容器中对align-items-stretch的解析不稳定，尤其是和.card配合时。你可以试试这两种方案：

方案A：给卡片强制设置100%高度 #

直接让卡片撑满父容器高度，不依赖Flex的拉伸特性，同时让卡片内容区域自动填充剩余空间，保证按钮始终在底部：

.card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.card-body {
  flex: 1; /* 让内容区自动填充，按钮固定在底部 */
}

然后把列上的.d-flex align-items-stretch移除，给列添加flex: 1 0 auto确保它是弹性项：

<div class="col-sm-4" style="flex: 1 0 auto;">
  <div class="card">
    <!-- 卡片内容 -->
  </div>
</div>

方案B：IE11专属Flex兼容补丁 #

用CSS特性检测专门针对IE11修复Flexbug：

@supports (-ms-ime-align:auto) {
  .col-sm-4 {
    -ms-flex: 1;
  }
  .card {
    -ms-flex: 1;
    height: 100%;
  }
}

2. 修复IE11中图片自适应问题 #

IE11对max-width:100%在Flex容器里的解析有偏差，给.card-img-top明确加上宽度限制：

.card-img-top {
  width: 100%;
  height: auto; /* 保持图片比例 */
}

如果需要固定图片高度避免比例失调，可给图片容器加溢出隐藏（IE11不支持object-fit，用这种方式替代）：

<div class="card-img-top" style="height: 200px; overflow: hidden;">
  <img src="你的图片地址" style="width: 100%; height: 100%;">
</div>

3. 移除图片/文本下方的可点击空白区域 #

这个问题是因为<a>标签被Flex容器拉伸导致的，让<a>只包裹图片区域即可：

.card a:first-child {
  display: block;
  overflow: hidden;
}

修改后的完整代码示例 #

整合以上修复的代码：

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Title 1 here</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <style>
    /* 通用修复 */
    .card {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .card-body {
      flex: 1;
    }
    .card-img-top {
      width: 100%;
      height: auto;
    }
    .card a:first-child {
      display: block;
      overflow: hidden;
    }
    /* IE11专属补丁 */
    @supports (-ms-ime-align:auto) {
      .col-sm-4 {
        -ms-flex: 1;
      }
    }
  </style>
</head>
<body>
  <div class="container-fluid">
    <!-- 顶部导航 -->
    <div class="row" style="border-bottom:#dedede solid 1px; min-width:615px !important;">
      <div class="brd_black align-self-center bg-white vertical-align col-4 col-xs-4" style="height:90px;">
        <a href="index.html"><img src="http://playak.com/media/reviews/photos/original/ca/22/a7/boats_490-1.jpg" alt="" class="img-fluid"></a>
      </div>
      <div class="brd_black col-8 bg-white vertical-align">
        <h4>Title 1 here</h4>
      </div>
    </div>

    <!-- 第二行内容 -->
    <div class="row mt-4">
      <div class="brd_black align-self-center col">&nbsp;</div>
      <div class="brd_black align-self-center col-10">
        <div class="row">
          <div class="brd_black col-12 bg-white align-top brd_grey pb-3 pt-3">
            <h4 class="text-dark">Title 2 here:</h4>
            <div class="alert alert-warning font-weight-bold" role="alert">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc purus neque, interdum eu venenatis ac, ultricies eu justo. Pellentesque at feugiat libero, non tincidunt est. Ut velit sapien, dictum eu lorem eget, interdum faucibus libero. Nam lobortis varius sem at cursus.
            </div>

            <!-- 卡片行 -->
            <div class="row mt-4">
              <div class="col-sm-4">
                <div class="card">
                  <a href="https://google.com" target="_blank"><img class="card-img-top" src="http://www.oakridgesmoraine.org/wp-content/uploads/2018/08/fallflowers.jpg" alt=""></a>
                  <div class="card-body">
                    <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur</h5>
                    <p class="card-text">
                      <span class="text-info font-weight-bold">Nunc purus:</span> Nunc imperdiet dignissim maximus. <br />
                      <span class="text-info font-weight-bold">О Nunc purus:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc purus neque, interdum eu venenatis ac, ultricies eu justo.<br />
                      <span class="text-info font-weight-bold">nteger vel ex id le:</span> mixed<br>
                      <span class="text-info font-weight-bold">Curabitur faucibus tortor:</span> 8 ch.<br>
                    </p>
                    <a href="https://google.com" target="_blank" class="btn btn-primary">Open url etc etc etc</a>
                  </div>
                </div>
              </div>

              <div class="col-sm-4">
                <div class="card">
                  <a href="https://google.com" target="_blank"><img class="card-img-top" src="http://www.oakridgesmoraine.org/wp-content/uploads/2018/08/fallflowers.jpg" alt="Card image cap"></a>
                  <div class="card-body">
                    <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur</h5>
                    <p class="card-text">
                      <span class="text-info font-weight-bold">Nunc purus:</span> Suspendisse et eleifend sem. <br />
                      <span class="text-info font-weight-bold">О Nunc purus:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc purus neque, interdum eu venenatis ac, ultricies eu justo.<br />
                      <span class="text-info font-weight-bold">nteger vel ex id le:</span> mixed<br>
                      <span class="text-info font-weight-bold">Curabitur faucibus tortor:</span> 75 ch.<br>(30 ch. оch.ого обуch.ния)
                    </p>
                    <a href="https://google.com" target="_blank" class="btn btn-primary">Open url etc etc etc</a>
                  </div>
                </div>
              </div>

              <div class="col-sm-4">
                <div class="card">
                  <a href="https://google.com" target="_blank"><img class="card-img-top"src="http://www.oakridgesmoraine.org/wp-content/uploads/2018/08/fallflowers.jpg" alt="Card image cap"></a>
                  <div class="card-body">
                    <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur</h5>
                    <p class="card-text">
                      <span class="text-info font-weight-bold">Nunc purus:</span> Suspendisse potenti. Integer vel ex id lectus ultrices scelerisque. Dsdfccvds.<br />
                      <span class="text-info font-weight-bold">О Nunc purus:</span> Praesent ut orci sed velit sagittis finibus at vel odio. Curabitur posuere a dolor eget commodo. In hac habitasse platea dictumst.<br />
                      <span class="text-info font-weight-bold">nteger vel ex id le:</span> mixed<br>
                      <span class="text-info font-weight-bold">Curabitur faucibus tortor:</span> 15,4 ch.<br>
                    </p>
                    <a href="https://google.com" target="_blank" class="btn btn-primary">Open url etc etc etc</a>
                  </div>
                </div>
              </div>
            </div>
            <!-- /卡片行 -->
          </div>
        </div>
      </div>
      <div class="brd_black align-self-center col">&nbsp;</div>
    </div>
  </div>
</body>
</html>

这些修改应该能解决你遇到的所有问题，本质上都是针对IE11对Flexbox和响应式图片的兼容缺陷做的补丁。

内容的提问来源于stack exchange，提问作者Cove