Image inside button is cut off only when using Internet Explorer
<p>I have a button and inside it i have an image and a separator.
The html code is as follows:</p>

<pre><code>&lt;button class="uiImageButton" id="btFactors" style="flex:1 1 0px;" type="button"&gt;
  &lt;img id="btFactorsImgID" style="vertical-align: bottom;" src=""&gt;
  &lt;div class="uiImageButtonSeperator"&gt;Factors/Formulas&lt;/div&gt;
&lt;/button&gt;
</code></pre>

<p>And the css:</p>

<pre><code>.uiImageButton {
    border: 1px solid;
    padding: 0px;
    border-color: #007AC3;
    background-color: white;
    color: #007ac3;
    text-align: left;
    height: 23px;
    width: 100%;
    font-size: 14px;
    font-family: Muli-Light;
}

.uiImageButtonSeperator {
    border-left: 1px solid lightgrey;
    padding-left: 4px;
    vertical-align: bottom;
    display: inline;
    margin-left: 1px;
    margin-right: 2px;
}
</code></pre>

<p>The problem I am facing with is that when viewing the page in Internet explorer the image inside the button is being cut off (The image is being placed at the bottom of the button and some of it is cut off).
When using Chrome it looks fins...
I also found that when adding this line of code to the class <code>uiImageButton</code></p>

<pre><code>display: flex;
</code></pre>

<p>it gives a result that is close to what I`m trying to get but not close enough.</p>

<p>It would be great if someone can explain why I`m having this problem only in IE and also how to fix it properly.</p>