2012-03-05 18 views
5

Ho provato ad archiviare una barra laterale semplice | contenuto visivamente con i normali float e poi ho usato la tecnica classica per colonne di uguale altezza con (margin-bottom: -99999px; padding-bottom: 99999px ecc.) ma non mi piaceva e ho avuto qualche problema qua e là con questo, quindi ho deciso di usare il flex-box, ho provato qualche tempo fa con larghezza di dimensione fissa e ha funzionato bene ma ora ho una larghezza percentuale quindi sembra che a Firefox non piaccia affatto ...Flexbox con larghezza percentuale su firefox non funzionante

This esempio mostra come normalmente mi aspetto che la flex-box funzioni, e ha funzionato bene in safari e cromo, ma firefox ignora semplicemente la larghezza percentuale ... Ho trovato che il it is a known issue di firefox ma è vecchio e pensavo lo avessero già risolto ...

Poi ho provato qualcosa in different in per ingannare firefox, ma ancora non volevo che mi aspettassi perché la barra laterale aveva dimensioni diverse da pagina a pagina in base al contenuto ...

Così alla fine mi arrendo sul flex-box con un layout fluido e uso qualcosa di più semplice che si adatti alle mie esigenze. ..

Ma io sono curioso di sapere se qualcuno risolvere questo problema con qualsiasi soluzione o se siamo tutti in coda per questo che stabilirà Mozila ...

Grazie!

+0

faux columns potrebbe essere una soluzione? http://www.alistapart.com/articles/fauxcolumns/ – fcalderan

+1

è quasi lo stesso hack che con margine/padding -bottom -/+ 99999px in modo da dare un aspetto visivo che le colonne abbiano uguale altezza ma in realtà non indossano 't, flexbox e table sono vere e proprie tecniche di altezza uguale, ma il problema che sto descrivendo non è legato alla colonna di uguale altezza ma con il fatto che firefox ignora la larghezza percentuale quando è in flex box. – panosru

risposta

1

Io sconsiglio vivamente di utilizzare il work-around margin-bottom: -99999px; padding-bottom: 99999px. Se vuoi un layout fluido (presumo che si tratti della domanda?) Con il 14%, 86% di divisione, usa semplicemente il vecchio CSS invece di Flex.

http://jsfiddle.net/97dtV/7/

Perché reinventare la ruota. Se stai cercando un modo migliore per creare il tuo sito, prova l'approccio "a griglia".

  • griglia semantica (http://semantic.gs/)
  • Bootstrap - (http://twitter.github.com/bootstrap/index.html)

Questo presuppone che si non hai bisogno di flex per qualche motivo specifico, se lo fai allora ignora questo;). Inoltre, considera la retrocompatibilità quando si utilizzano attributi specifici CSS3!

+0

il problema con l'approccio -/+ 99999px è che ho bisogno di avere la barra laterale con 'position: absolute' e questo è qualcosa che ho bisogno di evitare. – panosru

+0

hmm Potrei avere qualcosa come [this] (http://jsfiddle.net/97dtV/9/) però .. beh, ad essere onesto, attualmente uso [questo] (http://jsfiddle.net/97dtV/11/) approccio e finora sono contento di questo ... ma grazie per la risposta! – panosru

+1

Semplice vecchio CSS [cade a pezzi] (http://jsfiddle.net/mlms13/97dtV/73/) non appena le colonne non hanno la stessa altezza. Ecco perché le persone usano le tabelle -/+ 9999px, o flexbox o css. Un approccio a griglia semantica potrebbe essere l'opzione migliore, ma è un peccato che Flexbox sia così rotto in Firefox. –

Problemi correlati