-ms-flexbox and flexbox do not work in Internet Explorer

Question

I’m having trouble identifying what I should do to fix this mistake - I recently used the CSS Progress Wizard, it works perfectly on google Chrome and other browsers:

But when I visualize in internet explorer 9, it presents some errors:

Here is the code of CSS Progress Wizard:

https://jsfiddle.net/cxj5r83v/

.flexer, .progress-indicator {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

    .no-flexer, .progress-indicator.stacked {
        display: block;
    }

.no-flexer-element {
    -ms-flex: 0;
    -webkit-flex: 0;
    -moz-flex: 0;
    flex: 0;
}

.flexer-element, .progress-indicator > li {
    -ms-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    flex: 1;
}

.progress-indicator {
    margin: 0;
    padding: 0;
    font-size: 80%;
    text-transform: uppercase;
    margin-bottom: 1em;
}

    .progress-indicator > li {
        list-style: none;
        text-align: center;
        width: auto;
        padding: 0;
        margin: 0;
        position: relative;
        text-overflow: ellipsis;
        color: #bbbbbb;
        display: block;
    }

        .progress-indicator > li:hover {
            color: #6e6e6e;
        }

        .progress-indicator > li .bubble {
            border-radius: 1000px;
            width: 20px;
            height: 20px;
            background-color: #bbbbbb;
            display: block;
            margin: 0 auto 0.5em auto;
            border-bottom: 1px solid #888888;
        }

            .progress-indicator > li .bubble:before, .progress-indicator > li .bubble:after {
                display: block;
                position: absolute;
                top: 9px;
                width: 100%;
                height: 3px;
                content: '';
                background-color: #bbbbbb;
            }

            .progress-indicator > li .bubble:before {
                left: 0;
            }

            .progress-indicator > li .bubble:after {
                right: 0;
            }

        .progress-indicator > li.completed {
            color: green;
        }

            .progress-indicator > li.completed .bubble {
                background-color: #65d074;
                color: #65d074;
                border-color: #247830;
            }

                .progress-indicator > li.completed .bubble:before, .progress-indicator > li.completed .bubble:after {
                    background-color: #65d074;
                    border-color: #247830;
                }

        .progress-indicator > li a:hover .bubble {
            background-color: #5671d0;
            color: #5671d0;
            border-color: #1f306e;
        }

            .progress-indicator > li a:hover .bubble:before, .progress-indicator > li a:hover .bubble:after {
                background-color: #5671d0;
                border-color: #1f306e;
            }

        .progress-indicator > li.danger .bubble {
            background-color: #d3140f;
            color: #d3140f;
            border-color: #440605;
        }

            .progress-indicator > li.danger .bubble:before, .progress-indicator > li.danger .bubble:after {
                background-color: #d3140f;
                border-color: #440605;
            }

        .progress-indicator > li.warning .bubble {
            background-color: #edb10a;
            color: #edb10a;
            border-color: #5a4304;
        }

            .progress-indicator > li.warning .bubble:before, .progress-indicator > li.warning .bubble:after {
                background-color: #edb10a;
                border-color: #5a4304;
            }

        .progress-indicator > li.info .bubble {
            background-color: #5b32d6;
            color: #5b32d6;
            border-color: #25135d;
        }

            .progress-indicator > li.info .bubble:before, .progress-indicator > li.info .bubble:after {
                background-color: #5b32d6;
                border-color: #25135d;
            }

    .progress-indicator.stacked > li {
        text-indent: -10px;
        text-align: center;
        display: block;
    }

        .progress-indicator.stacked > li .bubble:before, .progress-indicator.stacked > li .bubble:after {
            left: 50%;
            margin-left: -1.5px;
            width: 3px;
            height: 100%;
        }

    .progress-indicator.stacked .stacked-text {
        position: relative;
        z-index: 10;
        top: 0;
        margin-left: 60% !important;
        width: 45% !important;
        display: inline-block;
        text-align: left;
        line-height: 1.2em;
    }

    .progress-indicator.stacked > li a {
        border: none;
    }

@media handheld, screen and (max-width: 400px) {
    .progress-indicator {
        font-size: 60%;
    }
}

Answer 1

Face really the "flex" does not work on IE 9, it works a little on IE 10 and only from the 11 that actually works. Here you can see the browsers and the versions that support.

Here’s an example of progress without using flex, see if it helps you:

.etapas {
  list-style: none;
  display: table;
  width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
}
.etapas li {
  display: table-cell;
  text-align: center;
  width: 1%;
}
.etapas li.active:before, .etapas li.complete:before, .etapas li.active .etapa, .etapas li.complete .etapa {
  border-color: #5293c4;
}
.etapas li:first-child:before {
  max-width: 51%;
  left: 50%;
}
.etapas li:before {
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  font-size: 0;
  overflow: hidden;
  border-top: 4px solid #ced1d6;
  position: relative;
  top: 21px;
  z-index: 1;
}
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.etapas li {
  display: table-cell;
  text-align: center;
  width: 1%;
}
.etapas li.active .etapa, etapas li.complete .etapa {
  border-color: #5293c4;
}
.etapas li .etapa {
  border: 5px solid #ced1d6;
  color: #546474;
  font-size: 15px;
  border-radius: 100%;
  background-color: #FFF;
  position: relative;
  z-index: 2;
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 30px;
  text-align: center;
}
.etapas li.complete .titulo, .etapas li.active .titulo {
  color: #2b3d53;
}
.etapas li .titulo {
  display: block;
  margin-top: 4px;
  max-width: 100%;
  color: #949ea7;
  font-size: 14px;
  z-index: 104;
  text-align: center;
  table-layout: fixed;
  word-wrap: break-word;
}

<ul class="etapas">
    <li class="active">
        <span class="etapa">1</span>
        <span class="titulo">Passo 1</span>
    </li>

    <li>
        <span class="etapa">2</span>
        <span class="titulo">Passo 2</span>
    </li>

    <li>
        <span class="etapa">3</span>
        <span class="titulo">Passo 3</span>
    </li>

    <li>
        <span class="etapa">4</span>
        <span class="titulo">Passo 4</span>
    </li>
</ul>

Answer 2

There are three possible problems

1. (if IE10 or IE11) is that you are not using the value compatibility parameter Edge, then add this:

   <meta http-equiv="X-UA-Compatible" content="IE=Edge">
   

2. Possibly you are using a version of Internet Explorer 10 that came before the release of August 2012 (maybe you are using the "beta" or pre-release version), in this case you need to use Windows Update.

3. You are using an older version, versions prior to Internet Explorer 10 does not support flex-box.

   Comment from the author confirms this:

   Strange, I’m on IE9 @re22