I have developed a website with Chrome initially (easiest to design for) but now am getting to IE support model.

That being said, I started with IE11 and made the necessary changes for the quirky differences between IE & Chrome. But now I am stepping down the IE versions. I was able to get 90% of the webpages to display correctly with CSS for IE10. But now most of the CSS elements that I have for these two browsers, are for the most part irrelevant for IE9.

I would like to keep from needing to have multiple browser specific style sheets, if possible.

First problems is converting IE10+ implementation of the flexbox model of CSS.

Current Implementation for the flexbox container:

```
div#navContainer{
    display: flex; //Current browsers (IE11, Chrome, etc)
    display: -ms-flexbox; //IE10 implementation
}

div#TeamsSection {
    text-align: center;
}

div.NavSection {
    margin: 0px 7px;
    padding: 4px 0px 0px 0px;
}

div#teams {
    margin: 0px;

    select {
        margin: 0px;
    }
}

```

HTML:

```
<div id="navContainer" class="float-left">
    <div id="LogoSection" class="NavSection">
        <div id="Logo">
            <img src="Images/Logo.png" />
        </div>
    </div>
    <div id="TeamsSection" class="NavSection">
        <label>Select a Team:</label><br />
        <div id="teams"></div>
    </div>
    <div id="UserSection" class="NavSection hidden">
        <label>Select a User:</label><br />
        <div id="requestor"></div>
    </div>
</div>

```

I know IE9 does not implement Flexbox, so please don't insult the research I have already done. I need an equivalent implementation that will allow me to change the HTML as little as possible.