изображение внутри кнопка отрезается только при использовании Internet Explorer

Question

У меня есть кнопка, внутри которой есть изображение и разделитель. HTML-код выглядит следующим образом:

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

И в CSS:

.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; 
} 

Проблема я столкнулся с в том, что при просмотре страницы в Internet Explorer изображение внутри кнопки будет отрезают (Изображение помещается в нижней части кнопки, а часть его обрезана). При использовании Chrome он выглядит плавниками ... Я также обнаружил, что при добавлении этой строки кода к классу uiImageButton

display: flex; 

это дает результат, близкий к тому, что I`m пытается получить, но не близко достаточно.

Было бы здорово, если бы кто-нибудь мог объяснить, почему у меня есть эта проблема только в IE, а также как правильно ее исправить.

Answer 1

Я не понимаю, в чем проблема.

Просто используйте этот код, чтобы сделать кнопку. Никакой flexbox, никаких дополнительных стилей и оберток. И отлично работает с IE.

Jsfiddle.

.button { 
 
    /* no specific styles needed */ 
 
    background: blue; 
 
} 
 

 
.button__image { 
 
    display: inline-block; /* to be on one line with text */ 
 
    width: 10px; /* don't forget sizes for your image */ 
 
    height: 10px; 
 
    margin-right: 10px; 
 
} 
 

 
.button__text { 
 
    font-size: 3em; /* just for fun */ 
 
    vertical-align: middle; /* set image to vertical center */ 
 
}

<button class='button'> 
 
    <img class='button__image' src='http://i.imgur.com/jB0PDw1.png'> 
 
    <span class='button__text'>Factors/Formulas</span> 
 
</button>