css - Flexbox and Internet Explorer 11 (display:flex in <html>?) -


i planning move away "floaty" layouts , use css flexbox future projects. delighted see major browsers in current versions seem support (in 1 way or another) flexbox.

i headed on "solved flexbox" http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ @ examples. "sticky footer" example not seem work in ie11. played around bit , got work adding display:flex <html> , width:100% <body>

so first question is: can explain logic me? fiddled around , worked, don't quite understand why worked way...

then there "media object" example works in browsers except - guessed - ie. fiddled around that, too, no success.

my second question therefore is: there "clean" possibility "media object" example working in ie?

according http://caniuse.com/#feat=flexbox:

"ie10 , ie11 default values flex 0 0 auto rather 0 1 auto, per draft spec, of september 2013"

so in plain words, if somewhere in css have this: flex:1 , not translated same way in browsers. try changing 1 0 0 , believe see -kinda- works.

the problem solution mess firefox, can use hacks target mozilla , change back:

@-moz-document url-prefix() {  #flexible-content{       flex: 1;     } } 

since flexbox w3c candidate , not official, browsers tend give different results, guess change in immediate future.

if has better answer know!


Comments

Popular posts from this blog

python - Subclassed QStyledItemDelegate ignores Stylesheet -

java - HttpClient 3.1 Connection pooling vs HttpClient 4.3.2 -

SQL: Divide the sum of values in one table with the count of rows in another -