28106 sujets

CSS et mise en forme, CSS3

Bonsoir,

Étant sous Mac je n'ai malheureusement pas la possibilité de tester de manière simple un bug sous IE 10-11. Je n'ai que netrenderer pour tester à partir de mon dépôt Github. Mais du coup chaque tentative de correction/modification me prend des heures. J'ai bien prévu d'acheter un PC dans quelque temps, mais en attendant, si une âme charitable passait par là...

Donc, j'ai un footer qui remonte en haut de ma page sous IE 10+ (voir ici). J'ai réussi à identifier la règle incriminée dans le bug, celle-ci est appliquée aux sections précédant le footer afin de garder celui-ci en bas de page quelque soit le contexte :
.section:not(.footer) {
    flex: 1; // @note Cette règle permet d'appliquer le footer en bas de page si le contenu ne l'atteint pas.
}

Comment garder le bénéfice de cette règle (un footer collé en bas de page) avec une compatibilité pour IE 10 et 11 ?
Modifié par Olivier C (25 Nov 2015 - 22:02)
Hello,

D'après les symptômes je me demande si tu ne tombes pas sur un bug connu (avec une description en anglais sur Github).

A priori utiliser
flex: 1 0 0%;
pourrait résoudre le problème (malheureusement je ne connais pas très bien flexbox et suis sous Mac également).

En descendant un peu sur la page flexbugs, le numéro 6 pourrait être une source d'ennui également : la valeur rendue par IE10 pour
flex: 1; 
n'est pas la bonne (en revanche c'est censé être corrigé sur IE11).

J'espère que ces ressources pourront t'aider !
Administrateur
Bonjour,

Il est effectivement possible qu'il s'agisse de ce bug.

Il est également possible que ce soit dû à la modification de la propriété min-width/height : depuis quelques versions de flexbox, les éléments ont une valeur de min-width/height intrinsèque équivalente à "auto" et non "0" comme les éléments habituels.

IE10-11 se réfèrent sans doute encore à l'ancienne valeur de 0.

Du coup, en écrivant "flex: 1", cela équivaut :
- à "flex: 1 1 0%" sur IE11
- à "flex: 1 0 0px" sur IE10 (cf. cet autre bug)

Dans les deux cas, la valeur de flex-basis est passée de "auto" à "0". Et si - en plus - la valeur intrinsèque de min-height est de 0 aussi, alors il est tout à fait possible que *tous* tes éléments sauf le footer se voient attribuer une hauteur réelle de 0.

Qu'il s'agisse de ce bug ou bien de celui évoqué par Ten, la solution me semble être la même : attribuer une valeur à flex-basis (auto par exemple).

Et si je puis me permettre, je trouve très risqué de cibler tous les éléments sauf le footer et de leur indiquer une valeur de flex: 1 1 0%.

Bonne chance Smiley smile
@Ten & @Raphael : merci pour vos informations très éclairantes. Le bug était effectivement en lien avec la propriété flex-basis, résolu selon vos conseils :
// *.styl
main
  flex-grow 1 // @note Permet d'appliquer le footer en bas de page si le contenu ne l'atteint pas
  flex-basis auto // @bugfix @affected IE 10-11 @note Valeur initiale à 0 pour ce navigateur

Bonne journée à vous.