IE 10-11 proprietà flex-base si comporta diversamente dai browser Webkit

Sto provando a utilizzare Media object, costituito da Media-body e Media-figure. L'HTML e le classi seguono questo modulo (l'ordine non dovrebbe avere importanza).IE 10-11 proprietà flex-base si comporta diversamente dai browser Webkit

.Media 
    .Media-figure 
    .Media-body

La semplice CSS è (nessun prefissi):

.Media { 
    display: flex 
} 

.Media-figure { 
    flex: 0 0 auto; 

    /* same as... 
    flex-grow: 0; 
    flex-shrink: 0; 
    flex-basis: auto; 
    */ 
} 

.Media-body { 
    flex: 1 1 0; 

    /* same as... 
    flex-grow: 1; 
    flex-shrink: 1; 
    flex-basis: 0; 
    */ 
}

Si noti che sto modificando il fattore di flex-shrink Media-figure per essere 0 (in contrasto con il link che ho postato). Suppongo che lo Media-figure sia di dimensioni fisse, e preferiremmo non renderlo più piccolo se abbiamo troppo spazio.

Uso flex-basis: 0 per la Media-body dovrebbe fissare l'elemento non avere dimensioni iniziali, che poi permette di consumare il resto dello spazio disponibile in quanto è l'unico elemento con flex-grow: 1. Tuttavia, in IE10-11, lo flex-basis: 0 fa sì che la larghezza di Media-body sia quella degli elementi interni e distrugge qualsiasi comportamento di avvolgimento se c'è troppo contenuto.

http://jsfiddle.net/sgardn04/3enpp4wg/

(Nota:.! Se si visualizza questi in cromo, faranno esattamente lo stesso aspetto Usa IE10-11)

mia soluzione attuale è quella di impostare il Media-body { flex-basis: auto }, che sembra lavorare. Suppongo che IE sia in difetto qui, dal momento che mi piace il comportamento dei browser webkit. Esiste un'interpretazione legittima delle specifiche che supportano il rendering degli IE? O in ogni caso, dove potremmo aspettarci un comportamento diverso per i browser webkit in base alle classi che ho definito qui? Le due proprietà sembrano comportarsi esattamente allo stesso modo in questo caso.

EDIT: Ho trovato questo handy graphic, che sembra suggerire che la proprietà flex-basis determina se lo spazio è distribuito prima o dopo la larghezza degli elementi viene presa in considerazione (flex-basis: 0 vs flex-basis: auto).

fonte

2015-01-23 gards

La differenza è dovuta al fatto di non avere un'unità sul valore di flex-basis. L'aggiunta di questo (o omettendo lo 0) ti dà il comportamento previsto in IE: updated fiddle

La documentazione MDN su flex cita questo:

Una dimensione preferita di 0 mosto hanno un'unità per evitare di essere interpretato come una flessibilità. Il valore predefinito è 0% quando viene omesso .

fonte

2015-01-23 21:02:22 Jason

Ho letto la documentazione e sono giunto alla stessa conclusione. Microsoft si riferisce a "Larghezza come specificato da un numero, ** seguito da un'unità di lunghezza **." nella loro documentazione MSDN e stato MDN "Definito come un numero ** seguito da un'unità assoluta ** come px, mm o pt o una percentuale della proprietà di dimensione principale del contenitore flex padre" – pwdst

MSDN indica anche la proprietà flex "È necessario specificare un componente zero flex-base con un'unità o precederlo di due fattori flessibili per evitare interpretazioni errate o dichiarazioni non valide." - sebbene con flex-grow e flex-shrink il codice originale dovrebbe essere valido sulla base di tale affermazione. La specifica concorda con MSDN e afferma "Uno zero senza unità che non è già preceduto da due fattori di flessibilità deve essere interpretato come un fattore di flessibilità.Per evitare interpretazioni errate o dichiarazioni non valide, gli autori devono specificare un componente "base flessibile" pari a zero con un'unità o precederlo di due fattori di flessibilità. " – pwdst

IE 10-11 proprietà flex-base si comporta diversamente dai browser Webkit

risposta

Problemi correlati