CSS - расстояние между кнопками в IE отличается от расстояния в Chrome.Как это исправить?

Question

Я не слишком хорошо разбираюсь в CSS и у меня проблемы с ним в Internet Explorer.Похоже, что есть частичные проблемы с Flexbox в IE и "CanIUse", который, как говорят, использует display: -ms-flexbox, но я думаю, что это может быть что-то еще.

Снимок экрана - Слева - IE, справа - Chrome.

Почему в IE отличается интервал и как это исправить?

HTML

<section id="employee-directory">
    <h4>Directory Search</h4>
    <p class="search-by">Search by first or last name</p>

    <form class="search-form">
        <div class="search-container">
            <input type="text" id="search-box" class="search" placeholder="Search Name" autocomplete="off">
            <button type="submit" id="search-button"><i class="fa fa-search"></i></button>
        </div>
        <ul class="suggestions"></ul>
    </form>

    <div id="directory-results">
        <p class="incorrect-info">Incorrect Information?<br>Please contact IT Support.</p>
    </div>

</section>

CSS

#employee-directory {
    background: rgb( 227, 227, 227);
    border: 2px solid gray;
    border-radius: 10px;
    -moz-border-radius: 10px;
    margin: 2px 6px 6px 10px;
    padding: 4px 10px;
    width: 220px;
    height: 230px;
    z-index: -1;
}

#employee-directory h4 {
    color: rgb(0, 75, 141);
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

#employee-directory p {
    font-size: 12px;
}

input {
    padding: 5px;
}

input.search {
    margin: 0;
    text-align: center;
    outline: 0;
    border: 2px solid #F7F7F7;
    width: 90%;
    position: relative;
    z-index: 0;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19);
}

.search-container {
    display: flex;
    display: -ms-flexbox;
}

#search-button {
    display: inline-block;
    width: 15%;
}

Answer 1

Это так странно, но я нашел обходной путь в том, что установка кнопки поиска более чем на 20%. Затем она будет хорошо работать в IE, как и в Chrome. Я предполагаю, что, возможно, поведение IE при отображении страницы немного отличается от chrome.

#search-button {
display: inline-block;
width: 20%;

}