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
Post a Comment