css - 按钮样式 div 的放置不同于按钮的放置

Question

在下面的代码片段中，我有一个按钮栏小部件，它应该允许按钮和非按钮成为子元素。但是，非按钮选项(选项 3)相对于其他选项偏移了一个垂直像素。

这是怎么回事？

(包含的 CSS 有一些冗余/覆盖条目，因为它是从 SASS 生成的。)

.button-bar {
    border: 0.1rem solid #d5d5d5;
    align-items: baseline;
    border-radius: 0.2rem;
    display: inline-flex;
    height: 5rem;
    padding: 0;
}

.button-bar > *:not(:last-child) {
    border-right: thin solid #d5d5d5;
}

.button-bar > * {
    align-items: center;
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: 1.6rem;
    line-height: 2.5rem;
    letter-spacing: normal;
    font-weight: normal;
    border: 0.1rem solid #d5d5d5;
    border-radius: 0.2rem;
    color: #424242;
    font-weight: normal;
    background-color: #f1f1f1;
    box-sizing: border-box;
    cursor: default;
    height: 5rem;
    margin: 0.5rem;
    padding: 0 3rem;
    text-decoration: none;
    user-select: none;
    width: auto;
    background-color: #fff;
    border: 0;
    color: #5e6062;
    height: 100%;
    margin: 0;
    max-height: 100%;
    white-space: nowrap;
}


.button-bar > *:focus {
    z-index: 1;
}

<div class="button-bar">
    <button>Option 1</button>
    <button aria-selected="true">Option 2</button>
    <div class="btn" tabindex="0">Option 3</div>
    <input type="button" value="Option 4">
</div>

Answer 1

button-bar 中的 div 字体不同。

尝试将 font-family: initial; 添加到 .button-bar > *。