IE9 和 IE10 的 Flexbox 顺序、位置、换行回退答案

【问题标题】：Flexbox order, position, wrapping fallback for IE9 and IE10IE9 和 IE10 的 Flexbox 顺序、位置、换行回退
【发布时间】：2016-04-08 01:04:48
【问题描述】：

我有一个“后端工程约束”，它迫使我以非语义方式对标记进行排序，但视觉上我的团队需要不同的顺序。我成功地使用 flex box 实现了这一点，并尝试为 IE 10 和 9 使用flexibility.js 进行填充。不幸的是，10 和 9 都有问题。

请注意，我不能使用 jQuery/DOM 操作来移动“第三”部分。

是否有其他人有替代建议或修复可以帮助实现以下目标：

标记：

<div class="first"> <div class="second"> <div class="third">

但他们需要在 IE 10 和 9 中直观地看到以下内容：

所以“第一个”和“第三个”需要在视觉上显示为同一部分的一部分，“第二”部分需要位于下方并占据整个容器的宽度。

请查看我完整的工作代码笔（完全在 chrome 中工作）：http://codepen.io/semantictissue/pen/MypRVz

有什么建议或帮助让这个跨浏览器友好吗？

【问题讨论】：

可以用CSS定位吗？如位置：相对？
不确定 IE 9 中是否有任何可靠的 flexbox 填充。而且 IE10 是基于旧版本的规范。这不是一件容易的事。以下是更多指导：stackoverflow.com/a/35137869/3597276
@4castle 不幸的是，不仅仅是对项目顺序的简单重新排列——实现“第一”和“第三”的“列”，同时在视觉上划分“第一”和“第三”是这里的挑战。

标签： html css internet-explorer cross-browser flexbox

【解决方案1】：

我找到的最简单的解决方案是将.third 定位为absolute。要在视觉上分割 .first 和 .third，请将 CSS 添加到 .first，以便在剩余空间中设置 .third。

body { margin: 0; position: relative; }
.first  { height:50px; width: 50%; background: blue; }
.second { height:50px; width:100%; background: gray; }
.third  { height:50px; width: 50%; background:green;
          position: absolute; top: 0; right: 0;      }

<div class="first">first</div>
<div class="second">second</div>
<div class="third">third</div>

Here is your modified CodePen

这种方法的主要缺点是它不会随着窗口变小而重排内容。媒体查询必须在某些窗口大小下使用，这些窗口大小会根据需要更改元素的宽度和位置。一旦可以将内容包装到自己的行中，使用 CSS 表格布局将很有用。 Info here

【讨论】：

我也尝试过使用float 和display: table，但它们都无法将.third 与.first 放在同一行。
这能回答你的问题吗？几天过去了，你还没有说什么，也没有选择我的答案。
是的，这是一个棘手的问题——我 pos:absolute 在调整窗口大小时会导致内容运行出现问题，但我认为你是对的，这是我能得到的最接近的后备方案.