Does IE9 Not Support Display: Inline-Flex at All

Does IE9 not support display: inline-flex at all?

As you can see here: Can I use FlexBox? Flexbox is not supported in IE9

EDIT : Based on OP comment to answer:

if there's any way to make it work in IE9, with prefix or something?

here is a SO users' answer from another related question:

I understand from your question, that you are aware of the fact that
IE9 does not support flexbox.
A polyfill for flexbox, named flexie.js,
does exist (not maintained afaik), but it works using the old 2009
syntax of flexbox.

Using the old syntax is of course not recommended,
since the 2009 syntax is really outdated and many browsers won't
recognize it anymore. But, you can try to use Autoprefixer, which
transforms new-syntax rules to old-syntax rules (while preserving the
new-syntax for browsers that do support it).

There are caveats - You won't be able to use inline-style, you would have to write your styles in CSS files, and I don't think it supports dynamic changes to the
DOM.

Disclaimer: I haven't tried that method with IE9 + flexie.

is it possible display: inline-flex in IE 9?

I understand from your question, that you are aware of the fact that IE9 does not support flexbox.

A polyfill for flexbox, named flexie.js, does exist (not maintained afaik), but it works using the old 2009 syntax of flexbox.

Using the old syntax is of course not recommended, since the 2009 syntax is really outdated and many browsers won't recognize it anymore. But, you can try to use Autoprefixer, which transforms new-syntax rules to old-syntax rules (while preserving the new-syntax for browsers that do support it).

There are caveats - You won't be able to use inline-style, you would have to write your styles in CSS files, and I don't think it supports dynamic changes to the DOM.

Disclaimer: I haven't tried that method with IE9 + flexie.

display: flex not working on Internet Explorer

Internet Explorer doesn't fully support Flexbox due to:

Partial support is due to large amount of bugs present (see known
issues).

_{Screenshot and infos taken from caniuse.com}

Notes

Internet Explorer before 10 doesn't support Flexbox, while IE 11 only supports the 2012 syntax.

Known issues

• IE 11 requires a unit to be added to the third argument, the flex-basis property see MSFT documentation.
• In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property. See bug.
• In IE10 the default value for flex is 0 0 auto rather than 0 1 auto as defined in the latest spec.
• IE 11 does not vertically align items correctly when min-height is used. See bug.

Workarounds

Flexbugs is a community-curated list of Flexbox issues and cross-browser workarounds for them. Here's a list of all the bugs with a workaround available and the browsers that affect.

1. Minimum content sizing of flex items not honored
2. Column flex items set to align-items: center overflow their container
3. min-height on a flex container won't apply to its flex items
4. flex shorthand declarations with unitless flex-basis values are ignored
5. Column flex items don't always preserve intrinsic aspect ratios
6. The default flex value has changed
7. flex-basis doesn't account for box-sizing: border-box
8. flex-basis doesn't support calc()
9. Some HTML elements can't be flex containers
10. align-items: baseline doesn't work with nested flex containers
11. Min and max size declarations are ignored when wrapping flex items
12. Inline elements are not treated as flex-items
13. Importance is ignored on flex-basis when using flex shorthand
14. Shrink-to-fit containers with flex-flow: column wrap do not contain their items
15. Column flex items ignore margin: auto on the cross axis
16. flex-basis cannot be animated
17. Flex items are not correctly justified when max-width is used

Display flex is not working in IE

Removed img-responsive CSS class from img and added vertical

.horizontal {
  height: 150px;
  line-height: 150px;
  text-align: center;
}

.vertical {
  vertical-align: middle;
  max-height: 150px;
  max-width: 100%;
}

updated Fiddle Here

inline-flex input element breaks to new line in IE11

IE11 is known for having many flex-related bugs.

A simple and easy solution in this case would be to make the parent a flex container:

.container {

  display: flex; /* new; forces all children into a single row */

  height: 2em;

}

.container>* {

  height: 100%;

  display: inline-flex;

  /* vertical-align: top; <--- not necessary anymore */

  justify-content: center;

  align-items: center;

  margin: 5px;  /* for demo only */

}

<div class="container">

  <button>test</button>

  <button>test 2</button>

  <button>test 3</button>

  <input type="text" value="hello" />

</div>

---

Related Topics