IE9和IE10的Flexbox訂單，位置，摺疊回退

我有一個「後端工程約束」，這迫使我以非語義方式訂購我的標記，但視覺我的團隊需要不同的訂單。我成功地通過flex box實現了這個功能，並試圖在IE 10和9中使用flexibility.js進行多邊填充。不幸的是，10和9都有問題。IE9和IE10的Flexbox訂單，位置，摺疊回退

請注意，我不能使用jQuery/DOM操作來移動附近的「第三」部分。

沒有任何一個人有替代的建議或修正，可以幫助實現以下目標：

標記：

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

但是他們需要直觀地看到在IE 10和9如下：

因此，「第一」和「第三」，需要在視覺上表現爲APAR噸的同一部分和「第二」部分需要在下面，並走完整寬度的集裝箱。

請參閱我的全部工作codepen（在Chrome已全面工作）：http://codepen.io/semantictissue/pen/MypRVz

任何建議或幫助，使這個跨瀏覽器友好嗎？

來源

2016-04-01 Jonas

你可以使用CSS定位嗎？如職位：相對？ – user2182349

不確定在IE 9中有沒有用於flexbox的可靠polyfill。而IE10是基於舊版本的spec。不是一件容易的事，你有。這裏有一些更多的指導：http://stackoverflow.com/a/35137869/3597276 –

@ 4castle不幸的是，不僅僅是一個簡單的項目順序重排 - 爲「第一」和「第三」實現「列」，同時也視覺上「第一「和」第三「是這裏的挑戰。 – Jonas

我找到的最簡單的解決方案是將.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

來源

2016-04-01 05:16:30 4castle

我也嘗試過使用'float'和'display：table'，但他們都不能將'.third'與'.first'放在同一行。 – 4castle

這是否回答你的問題？已經過了幾天了，你什麼也沒說，或者選擇了我的答案。 – 4castle

是的，這是一個棘手的問題 - 我pos：絕對會導致窗口大小調整時內容導入問題，但我認爲你是對的，這是最接近我可以作爲後備。 – Jonas

IE9和IE10的Flexbox訂單，位置，摺疊回退

回答

相關問題