CSS Flexbox gap异常：绝对定位元素致行内文本间出现间隙

问题现象 #

使用Flexbox的gap属性时遇到异常：在inline-flex容器中，内部包含行内文本，且前两个文本间存在一个用于屏幕阅读器的绝对定位隐藏span。首次渲染时，gap被错误地应用在"Left"和"Right with SR label"之间，但这两个文本并非独立的块级flex子元素；移除该隐藏span后，间隙不再出现。此外，将元素移除并重新添加到DOM（刷新DOM）后，异常会消失，推测是浏览器首次渲染的布局计算bug。

异常表现：第一个容器的文本间出现不应有的大间隙，第二个无隐藏span的容器显示正常；刷新DOM后第一个容器的间隙恢复正常。

原因分析 #

这是浏览器Flexbox布局计算的bug：绝对定位元素虽然视觉上脱离文档流，但首次渲染时，浏览器错误地将其视为有效的flex子项，导致它前后的匿名文本节点被识别为独立的flex子元素，进而在两者之间应用了gap值。当DOM刷新后，浏览器重新计算布局时，会正确忽略绝对定位的子元素，间隙也就消失了。

修复方法 #

方法一：给隐藏标签添加display: none #

修改屏幕阅读器隐藏类的CSS，添加display: none，让浏览器直接忽略该元素的布局计算：

.show-for-sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    display: none !important; /* 新增 */
}

方法二：用标签包裹文本，明确flex子项 #

将容器内的文本用<span>包裹，避免匿名文本节点的干扰，让浏览器清晰识别真正的flex子元素：

<div>
  <span>Left</span>
  <span class="show-for-sr">sr label&nbsp;</span>
  <span>Right with SR label</span>
</div>
<br>
<div>
  <span>Left</span>
  <span>Right without SR label</span>
</div>

方法三：调整绝对定位元素的flex属性 #

给隐藏span添加flex: 0 0 0，强制浏览器将其视为无尺寸的flex子项，避免影响间隙计算：

.show-for-sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    flex: 0 0 0 !important; /* 新增 */
}

原始代码示例 #

HTML #

<div>
  Left <span class="show-for-sr">sr label&nbsp;</span>Right with SR label
</div>
<br>
<div>
  Left Right without SR label
</div>

CSS #

.show-for-sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

div {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 3.5em;
}

内容的提问来源于stack exchange，提问作者Cream Whipped Airplane