为什么设置 `overflow: hidden` 会导致 `inline-block` 元素错位？

overflow 导致 inline-block 元素错位解析

当多个 inline-block 元素并列排列时，可能会出现错位显示的问题。这通常是由于其中一个元素设置了 overflow 属性引起的。

问题现象

在不设置 overflow 属性时，元素按预期显示在同一水平线上：

<p>不设置 overflow：<br></p>
<div style="display: inline-block;">a</div>
<div style="display: inline-block;">b</div>

而设置 overflow 后，元素会错位显示，如下所示：

<p>设置 overflow 后：<br></p>
<div style="display: inline-block; overflow:hidden;">a</div>
<div style="display: inline-block;">b</div>

原因分析

overflow:hidden 属性会影响 inline-block 元素的基线对齐。因为 inline-block 元素本质上也是行内块，当overflow设置为隐藏时，元素行高的基线位置就会发生变化，导致其后的元素与当前元素基线对齐时错位。

解决方案

为了修复此问题，可以在 inline-block 元素上设置 vertical-align 属性，将基线对齐方式调整为中间。

例如：

.list {
    display: inline-block;
    width: 80px;
    height: 80px;
    overflow: hidden;
    vertical-align: middle;
}

以上就是为什么设置 `overflow: hidden` 会导致 `inline-block` 元素错位？的详细内容，更多请关注其它相关文章！