我有一个网站与一些HTML代码是显示不同的根据设备，即使当使用谷歌浏览器在所有这些。
以下是它在其中一个窗口中的显示方式：

正如你所看到的红色圆圈内的文本没有正确排列。所以它应该像下面的屏幕截图（用另一个设备拍摄）：

In this case, the character 私 is lined up with the other characters of the same font size.
这是一个片段，你可能会看到图像（1）或（2），这取决于你的设备。

.markdownContainer {
    padding: .5rem;
    word-break: break-word;
}

.example {
    border: 0;
    text-align: center;
    font-size: 1.15rem;
}

.mdContainer {
    background-color: #fff;
    padding: .35rem;
    margin: 1rem .5rem;
    border-radius: 5px;
    border: 1px solid;
}

.kanji {
    display: inline-flex;
    flex-direction: column-reverse;
    text-align: center;
}

.kanji>span {
    font-size: .5rem;
    margin-bottom: -.25rem;
}

.example>.kanji>span {
    font-size: .7rem;
}

<div class="mdContainer example"><span class="kanji">私<span>わたし</span></span>はスペイン<span class="kanji">人<span>じん</span></span><span class="primary">だ</span><br>I am Spanish</div>

<div class="markdownContainer">Number + <span class="kanji">時<span>じ</span></span><br><span class="kanji">半<span>はん</span></span> can be appended to indicate "and a half"</div>

它在以下设备中不起作用：
操作系统：安卓10
谷歌浏览器版本：108.0.5359.128
操作系统：Ubuntu 20.04（没有可用的更新，至少对于Chrome）
谷歌浏览器版本：108.0.5359.124
它工作的地方：
谷歌浏览器版本： chrome 合金107.0.5304.105
操作系统：安卓13
但它也适用于Chrome的iPhone设备，例如（不能检查版本，因为我没有，但我有改变，以检查它，这是好的）。
我唯一的猜测是google chrome的一次更新把它弄坏了，设备上不能用是因为它们还没有更新，但是我查了chrome的更新日志，什么也没找到，所以我想知道代码是否正确。
你知道这是怎么回事吗？
编辑：我更新了这个问题，添加了另一种有同样问题的容器。你也可以在这里看到https://www.fluento.net/jp/N5/grammar/card/number-%E6%99%82
因为包含信息的字符串是带有自定义标记的String，所以我没有简单的方法在普通文本周围添加span，所以如果有一种方法可以不设置display: flex，我宁愿这样做。