CSS display: inline-flex在部分设备中排版对齐异常问题排查

问题分析 #

你遇到的是Chrome 108版本（Android 10、Ubuntu 20.04）中，带假名注释的汉字与普通文本基线对齐异常的问题，而旧版Chrome（Android 13的107版本、iPhone Chrome）显示正常。核心原因大概率是Chrome 108对inline-flex元素的基线计算逻辑做了调整，导致它和周围内联文本的基线不再匹配，而你无法给普通文本添加span标签，因此需要替换原有的flex布局方案。

替代方案（无需flex） #

方案1：inline-block + 绝对定位（推荐，对齐更稳定） #

通过inline-block保持元素的内联特性，用绝对定位将假名注释固定在汉字上方，避免flex带来的基线差异：

.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-block;
    text-align: center;
    line-height: 1; /* 消除行高对对齐的干扰 */
    position: relative;
    vertical-align: baseline; /* 确保汉字基线与普通文本一致 */
}

.kanji>span {
    font-size: .5rem;
    position: absolute;
    bottom: 100%; /* 将假名定位到汉字顶部上方 */
    left: 50%;
    transform: translateX(-50%); /* 水平居中假名 */
    margin-bottom: 0.1rem; /* 调整假名与汉字的间距 */
}

.example>.kanji>span {
    font-size: .7rem;
    margin-bottom: 0.15rem; /* 根据更大的字体调整间距 */
}

方案2：inline-block + 负margin #

如果不想用绝对定位，也可以将假名设为块级元素，通过负margin调整与汉字的间距：

/* 其他样式保持不变，仅修改.kanji相关 */
.kanji {
    display: inline-block;
    text-align: center;
    line-height: 1.1; /* 匹配普通文本行高 */
}

.kanji>span {
    font-size: .5rem;
    display: block;
    margin-top: -0.3rem; /* 向上偏移假名，缩小与汉字的间距 */
}

.example>.kanji>span {
    font-size: .7rem;
    margin-top: -0.4rem; /* 适配更大的假名字体 */
}

方案说明 #

• 两种方案都用inline-block替代inline-flex，确保元素的基线与普通内联文本一致，避免Chrome版本差异导致的对齐问题。
• 方案1的绝对定位方式不受周围文本行高影响，对齐稳定性更高；方案2更简洁，适合行高统一的场景。

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