CSS - 按钮旁边的间距在 IE 中与在 Chrome 中不同。我该如何解决？

Question

我不太擅长 CSS，在 Internet Explorer 上遇到问题。看起来 IE 中的 Flexbox 存在部分问题，据说“CanIUse”使用 display: -ms-flexbox 但我认为这可能是其他原因。

Screenshot - 左边是 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%;