请使用任何浏览器，看看这个小提琴，试图代表我正在建立的新网站上使用的结构（将鼠标悬停在“你好”的文字上！）：
正如您所看到的，我正试图动画一些文本的扩展，发生在<li>的内部。我认为我应该能够使秘密文本没有宽度（不可见），然后非常直接地将宽度设置为全宽度动画（在这个简单的例子中，我使用固定宽度，因为无法动画为“auto” “）。
问题是内联元素不关心提供的宽度，所以我必须让他显示为inline-block。这样做会使元素宽度为0像素。但是，文本仍然显示。所以我还必须应用CSS规则overflow: hidden。但隐藏溢出引入了另一个问题，我无法解释： span元素被移位。文本“世界”偏移到顶部，看起来像一些愚蠢的上标。
我可以丑陋地将跨度元素破解成这个小提琴：
但正如你所看到的，现在我们在句子末尾的点不会移动时出现问题。
如果您知道为什么此问题已经发生（它必须与内联 - 阻止？）以及如何修复问题会超级棒！
答案 0 :(得分：4)
直接回答原因是CSS 2.1规范中的这一段出现在Section 10的最底部：
'内联块'的基线是其最后一个线框的基线 在正常流程中，除非它没有流入线框或如果 它的'overflow'属性有一个除'visible'以外的计算值 在哪种情况下，基线是底部边缘边缘。
为什么规范说明这一点的根本原因尚不清楚，但它可能与实现除可见之外的溢出设置的困难有关。
您的方案中最简单的修复方法就是将所有三个跨度从基线中移除。文字的高度都相同，因此vertical-align:top，vertical-align:middle和vertical-align bottom都可以解决问题。
e.g。 li span { vertical-align:top; }
答案 1 :(得分：2)
您需要在内联块元素上使用vertical-align:middle;。我还添加了一些CSS行，例如line-height和其他一些东西。你会看到的。看看：