Html Firefox按钮和文本输入错误

我有一个非常奇怪的问题，按钮和输入有相同的CSS（除了背景），但是Firefox呈现的不同。IE或Chrome没有问题

#searchInput {
    width: 80%;
    margin: 0 auto;
    display: block;
    height: 40px;
    border: 1px solid #D8D8D8;
    font-size: 1rem;
    padding: 10px;
    text-align: center;
}
#searchButton {
    width: 80%;
    margin: 4px auto;
    display: block;
    height: 40px;
    border: 1px solid #D8D8D8;
    font-size: 1rem;
    padding: 10px;
    text-align: center;
    background: #F2F2F2;
    cursor: pointer;
}

我还包括了容器CSS，它们都在这里

.section {
    width: 100%;
    display: inline-block;
    margin: 10px auto;
    background-color: #FAFAFA;
    border-radius: 5px;
    border: 1px solid #D8D8D8;
    padding: 30px;
    position: relative;
}
.toggleIcon {
    width: 28px;
    height: 20px;
    top: 0;
    right: 10px;
    position: absolute;
    border-radius: 5px;
    background: #FAFAFA;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #D8D8D8;
    cursor: pointer;
    box-sizing: content-box;
}

HTML:

---

注意！我使用PageSlide进行导航，搜索使用的是AJAX

您的边距在searchInput和searchButton css类中有所不同

另外，这些元素的默认css行高度如何？它们是否不同？请尝试指定行高度

翼

---

顺便说一句，如果你能告诉我们根据你最后的评论，渲染有什么不同，那会有帮助的

---

利润率并没有引起我的问题，问题是投入要大得多 更高

您必须将

框大小：

边框框

属性添加到

输入#搜索输入

比如：

---

工作示例：提供您的HTML代码。通过一个基本示例（）和您的代码，我在Firefox&Crome中得到了相同的结果。你能更清楚地说明它们在哪里以及如何“以不同的方式呈现这些内容”吗？边距并没有引起我的问题，问题是输入要宽得多、高得多。非常感谢，我已经使用了*{box size:border box}，但我不知道Firefox对此毫不在乎。

<div id='search' class='section'> <a href="#sidebarNav" class='toggle'><img class = 'toggleIcon' src = 'img/icons/glyphicons_158_show_lines.png' alt = 'Open navigation'></a>
    <img id='logo' src='img/logo.png'>
    <form id='searchForm'>
        <input type='text' id='searchInput' name='searchInput'>
        <button type='submit' id='searchButton' name='searchButton' value='Search'>
            <img src='img/icons/glyphicons_027_search.png' alt='Search'>
        </button>
    </form>
    <div id='searchResults'></div>
</div>

#searchInput {
    ....
    box-sizing: border-box;
    -moz-box-sizing: border-box; /* Firefox */
}