html - CSS 过渡仅适用于 Chrome

Question

我创建了一个菜单，当您将鼠标悬停在链接上时，标题会滑出框架，并且不同的单词会滑入（客户请求）。我试图仅在 CSS 中执行此操作，它在 Chrome 中完全按预期工作，但在 Firefox 或 Opera 中却没有。只有第二个动画（不同的词滑入）有效，但主动画（普通词滑出）没有应用其过渡。这是一个带有示例的 jsFiddle：

http://jsfiddle.net/3tUAN/

如果必须的话，我可以求助于使用 jQuery（代码在那里，IE9 已经需要），但如果可能的话，我想让它只适用于 CSS。我考虑过尝试更具体地使用选择器（使用子选择器，例如a.MenuLink > li.MenuItem > span.MenuTitle），但我希望社区可以帮助我解决这个问题。

Answer 1

您需要left为span.MenuTitle. 这可能是其他浏览器中的错误，但它在 Firefox 中修复了它。像这样的东西：

span.MenuTitle {
    left: 0;
}

看到这个jsFiddle