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

Question

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平板电脑上的“ Internet”浏览器）中，当将浏览器的大小调整为1100的最大宽度到大约800px（恰好在小断点之前）时，右列与中间部分重叠一。在其他浏览器上，左列和右列会缩小到足以使中间列保持固定宽度的大小。

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

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

Answer 1

不确定我要为此写一个答案；但是bootstrap 4使用Flex（如您所提到的兼容性）：IE 11和android 4在技术上是古老的技术，这些技术已被废弃，但是我感到您对IE 11仍然显示在我的日志中感到沮丧……坦白说，要投入IE的工作太多了截至（2018）为止，它的价值比11还要高，就@NiMusco的建议而言，它并不是一个真正的媒体查询，因为它太复杂了，但是我能看到的唯一一个仅支持IE 11的CSS的JS动力注入；这仍然是不好的做法。

  

Detecting IE11 using CSS Capability/Feature Detection

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

祝您好运，但我建议您放弃IE <= 11，因为微软这样做了