Bootstrap 4 网格 |可变-固定-可变|宽度列，在 IE11 上重叠答案

【问题标题】：Bootstrap 4 grid | variable - fixed - variable | width column, overlaps on IE11Bootstrap 4 网格 |可变-固定-可变|宽度列，在 IE11 上重叠
【发布时间】：2019-01-02 04:25:38
【问题描述】：

Bootstrap 4 网格问题 IE11 有一个固定宽度的列

我有一个三列网格，其中中间列必须是固定宽度，左右列可以是可变/换行。

代码如下，使用我自己的行包装器类。引导是 4.1.1

<div class='centered_content'>

      <div class="row">

        <div class="col-md">
           variable width content
        </div> 

        <div class="col-md m d-none d-md-block ">
            Fixed width content
        </div> 

        <div class="col-md l d-none d-md-block">
            variable width content
        </div> 

      </div> 

</div> 




.centered_content {
  max-width:1130px; 
  margin: auto;
}

问题在于，在 IE11（以及 Android 4 平板电脑上的“互联网”浏览器）中，当在最大宽度 1100 到大约 800 像素之间调整浏览器的大小（就在小断点之前）时，右列与中间重叠一。在其他浏览器上，左右列缩小到足以让中间保持其固定宽度。

下面的图片说明了这一点。第一张显示它在 IE（和所有其他浏览器）上最大化浏览器时的外观，第二张图片显示 Chrome 的宽度减小（所需的行为），最后一张图片显示 IE 的宽度减小

我知道 IE 不完全支持 flex，所以猜测这可能是问题所在。 Edge 按照 Chrome 运行。有什么解决方法吗？

【问题讨论】：

媒体查询怎么样？您可以查看browserhacks.com 了解 IE “hacks”。
尝试将此添加到头部元素<meta http-equiv="X-UA-Compatible" content="IE=edge" />
stackoverflow.com/q/35111090/3597276
感谢 cmets，在 browserhacks 中没有看到任何有用的信息，尝试了元标记，但不确定最后一个 SO 问题是否与我相同。

标签： css internet-explorer flexbox bootstrap-4

【解决方案1】：

不确定我想为此写一个答案；但是 bootstrap 4 使用 Flex（正如您提到的兼容性）：IE 11 和 android 4 在技术上是被抛弃的古老技术但是我感到您对 IE 11 仍然出现在我的日志中感到沮丧......老实说，进入 IE 的工作太多了11 比它的价值（2018 年），至于@NiMusco 的建议，并不是真正的媒体查询，因为它太复杂了，但仅针对 IE 11 的 JS 驱动的 CSS 注入是我能看到的唯一 goto；这仍然是不好的做法。

Detecting IE11 using CSS Capability/Feature Detection

如果您需要更多的浏览器兼容性，请使用常规 html、浮动和清除恢复到 bootstrap 3（即使它仍然不完美，它仍然可以在 IE11 中工作）

祝你好运，但我建议放弃 IE

【讨论】：