Flexbox alternativo per IE9

Question

Inizialmente ho sviluppato un sito Web con Chrome (il più semplice da progettare), ma ora sto passando al modello di supporto di IE.

Detto questo, ho iniziato con IE11 e ho apportato le modifiche necessarie per le eccentriche differenze tra IE & Chrome. Ma ora sto abbassando le versioni di IE. Sono riuscito a visualizzare correttamente il 90% delle pagine Web con CSS per IE10. Ma ora la maggior parte degli elementi CSS che ho per questi due browser sono per la maggior parte irrilevanti per IE9.

Vorrei evitare di dover utilizzare più fogli di stile specifici del browser, se possibile.

Primo problema è la conversione di IE10 + implementazione del modello di CSS della CSS.

implementazione corrente per il contenitore FlexBox:

div#navContainer{ 
    display: flex; //Current browsers (IE11, Chrome, etc) 
    display: -ms-flexbox; //IE10 implementation 
} 

div#TeamsSection { 
    text-align: center; 
} 

div.NavSection { 
    margin: 0px 7px; 
    padding: 4px 0px 0px 0px; 
} 

div#teams { 
    margin: 0px; 

    select { 
     margin: 0px; 
    } 
} 

HTML:

<div id="navContainer" class="float-left"> 
    <div id="LogoSection" class="NavSection"> 
     <div id="Logo"> 
      <img src="Images/Logo.png" /> 
     </div> 
    </div> 
    <div id="TeamsSection" class="NavSection"> 
     <label>Select a Team:</label><br /> 
     <div id="teams"></div> 
    </div> 
    <div id="UserSection" class="NavSection hidden"> 
     <label>Select a User:</label><br /> 
     <div id="requestor"></div> 
    </div> 
</div> 

So IE9 non implementa Flexbox, quindi per favore non insultare la ricerca che ho già fatto. Ho bisogno di un'implementazione equivalente che mi permetta di cambiare l'HTML il meno possibile.

Answer 1

Utilizzare modernizr per rilevare se sono presenti funzionalità di flessibilità e fornire, se necessario, stili di fallback.Modernizr aggiungerà classi come flexbox, no-flexbox, e flexbox-legacy all'elemento html, così nei vostri stili si può usare:

.container { 
     display: flex; 
    } 
    .no-flexbox .container { 
     display: table-cell; 
    } 

Consiglio vivamente la lettura attraverso (@zomigi) le presentazioni di Zoe Gillenwater in materia, in particolare Leveling Up With Flexbox (Smart Web Conference - September 2014)

• slitta 21: spaziatura orizzontale navigazione>display: inline-block;
• scivolo 62: appunta elementi senza FlexBox>display: table-cell;
• diapositive 70,71: allineare forme fallback
• slitta 88,91: esempio con e senza ordine flex

Inoltre, nella sua presentazione CSS3 Layout, ci sono alcuni buoni anteprime collaterali sideby di layout con e senza FlexBox:

• scivolo 73: Uso inline-block con FlexBox: forma orizzontale
• scivolo 79: Uso inline-block con FlexBox: navigazione orizzontale

Alcuni di take away per me:

• supporto del browser IE10 + è piuttosto buona caniuse
• uso auto-prefixr per gestire il browser prefissi
• uso Modernizr per fornire fallback
• "FlexBox non è tutto o niente" @zomigi

Answer 2

Mi piace la risposta di cui sopra, ma non è necessario utilizzare modernizr. Si potrebbe semplicemente usare il layout di tabella per ie9 e flexbox per gli altri.

.container { 
    display: table-cell; // ie9 
    display: flex;  // others 
} 

Answer 3

Un anno dopo, questa soluzione, utilizzando JavaScript per regolare il layout in vecchi browser, sembra interessante =>https://github.com/10up/flexibility

Quasi 2.000 stelle su Github ma l'ultimo commit era 3 mesi fa, ho non so se è ancora mantenuto attivamente.