IE9 和 IE10 的 Flexbox 顺序、位置、包装回退

Question

我有一个 "backend engineering constraint" 迫使我以非语义方式对我的标记进行排序，但 视觉上 我的团队需要不同的顺序。我成功地使用 flex box 实现了这一点，并尝试为 IE 10 和 9 使用 flexibility.js polyfill。不幸的是，10 和 9 都有问题。

请注意，我不能使用 jQuery/DOM 操作来移动 "third" 部分 。

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

标记：

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

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

因此 "first" 和 "third" 需要在视觉上显示为同一部分的一部分，并且 "second" 部分需要位于下方并占据容器的整个宽度。

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

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

Answer 1

我找到的最简单的解决方案是将 .third 定位为 absolute。要直观地划分 .first 和 .third，请将 CSS 添加到 .first，从而为 .third 留出空间以在剩余的 space 中设置。

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

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

IE9 和 IE10 的 Flexbox 顺序、位置、包装回退

Flexbox order, position, wrapping fallback for IE9 and IE10

html

css

internet-explorer

cross-browser

flexbox