在 Chrome 中悬停时显示隐藏的嵌套跨度时列表项高度的奇怪跳跃

Question

我有一个链接列表，这些链接使用嵌套的 span 元素作为鼠标悬停的额外信息。

查看此页面：http://kenbrookyouth.com/summercamp11/

因此，在 Firefox 中，该列表中的所有内容（请参阅页面“夏令营”部分中的营地列表，就在两个描述下方；有两个列表 - 左侧和右侧之一）看起来不错，包括当您将鼠标悬停在列表项（营地名称）上时。这样做会产生隐藏的嵌套跨度的预期效果，并显示每个营地的年龄信息。

然而，在 Chrome 和 Safari 中，列表项在悬停时会出现奇怪的跳转故障，因此隐藏的嵌套跨度看起来实际上是显示为块，而不是应有的浮动。

关于这个有什么建议吗？

Answer 1

可以通过将链接中的文本包装在<span> 标签中来解决问题（例如第一个标签中的“Adventurers”）。出于某种原因（不知道确切原因），当周围的其他元素具有宽度或也浮动或两者兼有时，浮动表现最佳。当文本没有立即被标签包围时，文本也会变得不可预测，因此我尝试将所有文​​本保留在 spans（或 h1、h2 或任何其他适合文本的标签）中。

另一种解决方法是为<a> 标签添加宽度，但您必须为每个链接指定不同的宽度，因此只需使用span 标签。