Safari：列表项编号与浮动范围重叠

Question

我维护一个具有交互式内联脚注的网站，这些脚注作为浮动

<span>

元素（带有

float:left

）插入到脚注编号后面的段落中。这个想法是，它们自然会插入到脚注编号所在行的之后，但不将该行分成两行（因此是浮动的）。

这在大多数情况下都非常有效，并且 您可以在此 CodePen 或下图中看到其外观的简化示例。

但是，我在 Safari 上注意到在编号列表中使用这些脚注时出现问题 (

<ul>

/

<li>

)。 看看这个 CodePen，我已将脚注插入到列表中。

在 Chrome 和 Firefox 上，可以正确呈现：

但是，在 Safari 上，放置在编号列表项末尾的脚注会导致下一个列表项的编号迁移到上一行：

注意“3”与浮动脚注的右侧重叠。这种情况也会发生在无序列表 (

<ul>

) 中，其中项目符号与脚注重叠。

有趣的是，如果将

float: left

更改为

float: right

，它最终会迁移到脚注的左侧。

知道这里发生了什么，以及如何修复它，以便它在浏览器之间呈现一致吗？这是 Safari 的错误吗？

已在 Mac 版 Safari 17.2.1 和 iOS 17.2.1 版 Safari 移动版上进行测试。两者都有同样的问题。

代码

如果您不想点击进入 CodePen：

<article>
  <ol>
    <li>
      <p>This is a list item. It has some text, and that text wraps nicely at the edge of the article as you'd expect.<sup>1</sup>
      <span class="inline-footnote"><sup>1</sup> This is a span, floating in the middle of the list item, representing an inline footnote.</span>
        The footnote below is intended to be between multiple lines of text, and as you can see, it is.</p>
    </li>
    <li>
      <p>This is a second list item. It has some more text.<sup>2</sup>
      <span class="inline-footnote"><sup>2</sup> This is another span, in the middle of the list item, representing a second inline footnote.</span></p>
    </li>
    <li>
      <p>This is a third list item.</p>
    </li>
  </ol>
</article>

.inline-footnote {
  float: left;
  clear: both;
  width: 100%;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 1em;
  font-size: 90%;
  display: flex;
}

.inline-footnote > sup {
  margin-right: 0.2em; 
}

我尝试过的一些事情

• 添加

  ol { overflow: hidden; }

  或

  ol { overflow: auto; }

  （建议在其他一些SO问题上）并不能解决问题，重叠仍然存在，它只是切断了数字。

  

• 设置

  ol { list-style-position: inside; }

  确实解决了问题，但代价是使换行文本对齐到数字的左侧而不是右侧，这是我不想要的。

  

Answer 1

这似乎是一个以前不存在的问题（至少在我的 iPad 上的 IOS 16.7.4 上）。

我尝试了这个技巧：`li:has(span.inline-footnote) + li {clear: Both; }

[不确定第一部分是否重要]并且在 iOS 17.2.1 (iPhone) 上问题消失了，有序列表的 3. 是它应该在的位置。而且，至少在 Windows10 上的 Edge/Chrome 上，布局还是可以的。

<article>
  <ol>
    <li>
      <p>This is a list item. It has some text, and that text wraps nicely at the edge of the article as you'd expect.<sup>1</sup>
        <span class="inline-footnote"><sup>1</sup> This is a span, floating in the middle of the list item, representing an inline footnote.</span> The footnote below is intended to be between multiple lines of text, and as you can see, it is.</p>
    </li>
    <li>
      <p>This is a second list item. It has some more text.<sup>2</sup>
        <span class="inline-footnote"><sup>2</sup> This is another span, in the middle of the list item, representing a second inline footnote.</span></p>
    </li>
    <li>
      <p>This is a third list item.</p>
    </li>
  </ol>
</article>
<style>
  /* Important CSS */
  
  li:has(span.inline-footnote)+li {
    clear: both;
  }
  
  .inline-footnote {
    float: left;
    clear: both;
    width: 100%;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: 1em;
    font-size: 90%;
    display: flex;
  }
  
  .inline-footnote>sup {
    margin-right: 0.2em;
  }
  /* Unimportant styling CSS */
  
  article {
    max-width: 35em;
    margin: 0 auto;
    line-height: 1.35em;
  }
  
  p {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }
  
  sup {
    font-size: 75%;
    line-height: 0.9em;
  }
</style>