CSS hacks for flexbox in IE10

Asked Jun 20 '17 at 09:28

Active Jun 20 '17 at 11:17

Viewed 84 times

I am having trouble with flex angular material, in IE10. I know that angular material doesn't support IE10, but instead of re-making the whole website I'm looking for additional css hacks to add to accomplish the same result. This is how the website looks in IE10.

This is my html

<div layout="row" layout-align="center end" layout-padding layout-wrap>
  <div layout="column" layout-align="start center" flex-xs="100" flex-gt-sm="50" flex-gt-md="33">
    <img id="computer" src="images/infographics/computer_w_marker.svg" alt=""/>
    <h2>text 1</h2>
    <p>text 1</p>
  </div>
  <div layout="column" layout-align="start center" flex-xs="100" flex-gt-sm="50" flex-gt-md="33">
    <img id="car" src="images/infographics/car_w_large_marker.svg" alt=""/>
    <h2>text 2</h2>
    <p>
      text 2
    </p>
  </div>
  <div layout="column" layout-align="start center" flex-xs="100" flex-gt-sm="50" flex-gt-md="33">
    <img id="sweden"/>
    <h2>text 3</h2>
    <p>
      text 3
    </p>
  </div>
</div>

Thanks

edited Jun 20 '17 at 11:17

asked Jun 20 '17 at 09:28

andrea

The question is about css, yet you haven't actually showed us the css you're using... – marcellothearcane Jun 20 '17 at 09:29
1

As angular Material uses CSS3 Flexbox Supported Browsers are : IE 11+, Chrome, Safari, Firefox, Android 4.2+ and iOS 8+. – Asons Jun 20 '17 at 09:30
Are you using vendor prefixes – Mr.Pandya Jun 20 '17 at 09:30
I'm not using css, i'm using the front-end framework angular material that comes with built in css – andrea Jun 20 '17 at 09:30
I know that but is there a way to make it work? – andrea Jun 20 '17 at 09:32
You could try something like this: https://github.com/jonathantneal/flexibility – ippi Jun 20 '17 at 09:57
My best bet here is to inspect the rendered elements, get their id's/classes and then add a custom css which append the IE10 flex properties to those rules. – Asons Jun 20 '17 at 10:50

CSS hacks for flexbox in IE10

0 Answers0