IE9 ve IE10 için Flexbox sırası, konumu, geri sarma kaydırma

Question

İşaretlemeyi semantik olmayan bir şekilde sipariş etmek zorunda bırakan bir "arkadan mühendislik kısıtlaması" aldım ancak görsel olarak ekibimin farklı bir siparişe ihtiyacı var. Bunu esnek kutu ile başardım ve IE 10 ve 9 için flexibility.js ile polifilize etmeye teşebbüs ettim. Ne yazık ki 10 ve 9'un her ikisi de sorun yaşıyor.

Not: etrafında "üçüncü" bölümü taşımak için jQuery/DOM manipülasyon kullanamazsınız.

herhangi bir kimse aşağıdaki elde etmenize yardımcı olabilir alternatif öneri veya düzeltmeleri var mı:

Biçimlendirme:

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

Ama görsel olarak IE 10 ve 9 aşağıdaki görmeye ihtiyaç duydukları:

Yani "önce" ve "üçüncü" apar görsel olarak görünmesi gerekir Aynı bölümün ve "ikinci" bölümün t altında olması ve kabın tam genişliğine gitmesi gerekir. http://codepen.io/semantictissue/pen/MypRVz

Herhangi öneri veya bu çapraz tarayıcı dostu hale gelmesine yardımcı:

benim tam çalışma (tam krom çalışan) codepen bakın?

Answer 1

Bulduğum en kolay çözüm, .third'u absolute olarak konumlandırmaktır. .first ve .third bölümlerini görsel olarak bölümlere ayırmak için .first numaralı CSS'yi .third numaralı odaya bırakarak kalan alanı ayarlayınız.

Here is your modified CodePen

Bu yaklaşımın ana dezavantajı

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>

pencere küçülüyor gibi içerikleri akıtacak olmamasıdır. Medya sorguları, öğelerin genişliğini ve konumunu gerektiği gibi değiştiren belirli pencere boyutlarında kullanılmalıdır. Bir CSS tablo düzenini kullanmak, içerik kendi satırına sarılabildiğinde yararlı olacaktır. Info here