Firefox与Chrome中Span元素Tooltip位置差异的Chrome修复方案咨询

问题原因 #

Chrome 与 Firefox 对行内元素（inline）作为相对定位容器时，绝对定位子元素的定位基准处理逻辑不同：

• Firefox 以元素的第一行行框作为定位基准，Tooltip 会靠近触发 hover 的行；
• Chrome 以整个跨多行的行内元素的边界框作为基准，Tooltip 会显示在整个元素的中间下方，与目标行距离较远。

解决方案 #

将 Tooltip 的定位基准从整个跨多行的父元素，改为第一行的内容容器，确保跨浏览器行为一致。

修改后的代码 #

CSS

/* 给第一行内容添加定位容器 */
.tooltip-anchor {
  position: relative;
}

.current-span:hover .extra-information {
  visibility: visible;
}

.extra-information {
  visibility: hidden;
  width: max-content;
  background-color: var(--color-fg);
  color: var(--color-bg);
  text-align: center;
  border-radius: 5px;
  padding: 3px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 110%;
  left: 50%;
  transform: translateX(-50%);
}

HTML

<span class="current-span">
  <!-- 第一行内容包裹在定位容器内 -->
  <span class="tooltip-anchor">
    <span class="extra-information">rs1</span>
    <span>Text</span>
    <span>Text</span>
    <span>Text</span>
    <span>Text</span>
    <span>Text</span>
    <span>Text</span>
  </span>
  <br>
  <span>Text</span>
  <span>Text</span>
</span>

另一种可选方案（保持原HTML结构） #

如果不想修改HTML结构，可以将父元素 .current-span 的显示方式改为 inline-block，同时调整 top 值来模拟Firefox的效果：

.current-span {
  position: relative;
  display: inline-block;
}

/* 调整top值，让Tooltip靠近第一行，需根据实际行高微调 */
.extra-information {
  /* 其他样式不变 */
  top: 50%;
}

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