偏移其他内联元素的过渡在 Safari 中无法正确呈现

Question

我正在运行 macOS 12.6.3 和 Safari 16.3。当用户将鼠标悬停在导航栏上时，我试图使导航栏中元素的字体粗细发生变化。这自然会将其他导航栏项目推到它旁边，这很好。问题是，虽然这在 Chrome 中呈现得非常好，但在 Safari 中它看起来很奇怪，我无法准确描述。

这是我使用的CSS代码：

#header li {
    display: inline;
    background: #323232;
    /*background: linear-gradient(0deg, rgba(40,40,40,1) 0%, rgba(50,50,50,1) 100%);*/
    padding: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    border: solid 1px #282828;
    border-top: solid 1px #3a56b4;
    border-bottom: solid 1px #414141;
    margin: 1px;
    font-weight: normal;
    z-index: 0;
}

#header li:hover {
    background: #414141;
    /*background: linear-gradient(0deg, rgba(50,50,50,1) 0%, rgba(65,65,65,1) 100%);*/
    border: solid 1px #4e6ac8;
    font-weight: bold;
    z-index: 2;
}

#header

用于无组织的列表，该列表旨在成为导航栏。在 Chrome 中，将鼠标悬停在导航栏项上会导致字体粗细发生变化，从而将其他项推到上方。这是意料之中的。在 Safari 中，这会导致一个非常奇怪的渲染问题，它不会将相邻元素推过去，而是会导致此视觉错误： 似乎填充没有与文本一起推送。如何在 Safari 中解决此问题？ （Chrome 中预期行为的图片：）