Css 按钮样式div的放置与按钮的放置不同

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

发生什么事了

（包含的CSS有一些冗余/覆盖项，因为它是从SASS生成的。）

。按钮栏{
边框：0.1rem-solid#d5d5；
调整项目：基线；
边界半径：0.2rem；
显示：内联flex；
身高：5雷姆；
填充：0；
}
.按钮栏>*：非（：最后一个子项）{
右边框：薄实线#D5D5；
}
.按钮栏>*{
对齐项目：居中；
显示器：flex；
证明内容：中心；
文本对齐：居中；
字体大小：1.6rem；
线高：2.5雷姆；
字母间距：正常；
字体大小：正常；
边框：0.1rem-solid#d5d5；
边界半径：0.2rem；
颜色：#4242；
字体大小：正常；
背景色：#f1f1；
框大小：边框框；
游标：默认值；
身高：5雷姆；
保证金：0.5雷姆；
填充：0 3rem；
文字装饰：无；
用户选择：无；
宽度：自动；
背景色：#fff；
边界：0；
颜色：#5e6062；
身高：100%；
保证金：0；
最大高度：100%；
空白：nowrap；
}
.按钮栏>*：焦点{
z指数：1；
}

选择1
选择2
选择3

您的字体与按钮栏中的div不同

---

尝试添加

font-family:initial到
。按钮栏>*
我确信这不会发生。在我的应用程序中，字体没有明显的不同，所以当它在这里出现不同时，我并不担心它。但这解决了问题。