能否通过flexbox属性完美模拟display: inline-block的显示效果？

完整修复CSS #

将你当前的替换规则调整为以下内容即可完美匹配原有inline-block的视觉效果：

.mjx-math * {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: nowrap;
    flex-shrink: 0;
    vertical-align: baseline;
    width: fit-content;
    height: fit-content;
}

如果仍有上标、下标类元素的垂直偏移问题，可以补充以下针对性规则：

.mjx-sup {
    align-items: flex-start;
}
.mjx-sub {
    align-items: flex-end;
}

适配逻辑说明 #

1. align-items: baseline 保证flex容器内的内容基线和原有inline-block规则一致
2. flex-wrap: nowrap 禁止内容自动换行，匹配inline-block的原生文本排布逻辑
3. flex-shrink: 0 避免MathJax固定尺寸的字符元素被flex布局挤压变形
4. vertical-align: baseline 保证flex容器自身和父级节点的基线对齐，和inline-block默认行为完全一致
5. width/height: fit-content 强制inline-flex容器宽高贴合内容，避免产生多余空白占位

内容的提问来源于stack exchange，提问作者David Scherfgen