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

Question

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

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

代码如下,使用我自己的类作为行包装器.Bootstrap是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到大约800px之间(在小断点之前)调整大小时,右列与中间列重叠.在其他浏览器中,左右列收缩到足以允许中间保持其固定宽度.

下图说明了这一点.第一个展示了IE浏览器(以及所有其他浏览器)最大化浏览效果,第二张图片显示了宽度减小的Chrome(所需行为),最后一张图片显示IE宽度减小

我知道IE不完全支持flex所以猜测可能是问题.Edge适用于Chrome.任何解决方法？

Answer 1

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

使用 CSS 功能/功能检测检测 IE11

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

祝你好运，但我建议放弃 IE <= 11，因为微软已经这么做了