代码之家 › 专栏 › 技术社区 › KevInSol

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

bootstrap-4 flexbox internet-explorer css

KevInSol · 技术社区 · 7 年前

带固定宽度列的引导4网格问题IE11

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

代码在下面,使用了我自己的类作为行包装器。引导程序为4.1.1

<div class='centered_content'>

<DIV class=“row”>

<DIV class=“col md”>
可变宽度内容
&L/DIV & GT;

<DIV class=“col m d m d-none d-md-block”>
固定宽度内容
&L/DIV & GT;

<DIV class=“col md l d-none d-md-block”>
可变宽度内容
&L/DIV & GT;

&L/DIV & GT;

&L/DIV & GT;




.以内容为中心{
最大宽度:1130px;
边缘:汽车;
}
< /代码> 

问题在于,在IE11(以及安卓4平板电脑上的“互联网”浏览器)中,当将浏览器的最大宽度从1100调整到大约800px(就在小断点之前)时,右列与中间列重叠。在其他浏览器上,左、右列收缩到足以使中间部分保持其固定宽度。


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

我知道IE不完全支持flex,所以我想这可能是问题所在。边缘按铬加工。有什么解决办法吗?





.

代码在下面,使用了我自己的类作为行包装器。引导程序为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(以及安卓4平板电脑上的“互联网”浏览器)中,当将浏览器的最大宽度从1100调整到大约800px(就在小断点之前)时,右列与中间列重叠。在其他浏览器中,左、右列收缩到足以使中间部分保持固定宽度。

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

我知道IE不完全支持flex,所以我想这可能是问题所在。边缘按铬加工。有什么解决办法吗?

1 回复 | 直到 7 年前

melfy 7 年前

我不确定是否要为这个问题写一个答案;但是bootstrap 4使用了flex(正如你提到的兼容性):ie 11和android4是技术上被抛弃的古老技术,但是我觉得你对ie11仍然出现在我的日志中感到失望…事实上,对于@nimusco的建议来说,要进入IE 11需要做的工作太多了,这并不是一个真正的媒体查询,因为它太复杂了,但是仅针对IE 11的JS-powered CSS注入是我能看到的唯一的Goto;这仍然是一个糟糕的实践。

Detecting IE11 using CSS Capability/Feature Detection

如果您需要更多的浏览器兼容性,请使用常规的HTML、浮动和清除功能(即使它仍然不完美,但在IE11中仍能正常工作)恢复到bootstrap 3。

祝你好运,但我建议你放弃IE<=11,因为微软做到了。