视频的存在会影响 Safari 中的 Cufon 文本

Question

网站：http://ghostpool.com/wordpress/slide/

如果您单击“+”按钮在左下角显示页脚，cufon 标题文本在 Safari 中快速移动或消失（使用 5.0.3）。其他浏览器中不会出现此问题。如果我删除滑块中第五张幻灯片中的视频或将其悬停在视频上，或者默认显示页脚且没有切换功能，则问题就会消失。这意味着 Safari 中的视频和 cufon 一定存在问题。感谢任何解决此问题的帮助。

Answer 1

在向 Cufon 的创建者询问此错误后，他回复了这个

https://github.com/sorccu/ cufon/issues/199

"
您好，我以前没有遇到过这种情况，但您可能想尝试将 z-index（几乎是除 auto 之外的任何值）添加到定位的 cufon 元素，而不是删除定位。它可能会起作用。或者，您可以尝试将 z-index 添加到视频本身（或者如果尚未定位，则将其定位）。

请让我知道进展如何。另外，我认为这个问题可能会影响画布。 Safari 团队可能会在他们这边修复它（迟早......）该网站上还有其他可能相关的问题，例如子菜单有时会部分呈现......请参阅附件（如果有效）。

下一个版本（1.10）实际上不再使用定位，所以我想这个问题可能会消失。但请不要问什么时候发布，因为我不知道。

-西莫
“

看来添加除 auto 之外的任何 z-index 值也可以解决此问题。使用position: static 过多地限制了 Cufon'd 文本的控制

我还发现它更容易使用，

*.cufon-canvas { 
  z-index: 0;
}

而不是 GhostPool 建议的修复 。

我唯一不喜欢这些修复的地方是，如果您尝试在任何 cufon 块中嵌套 span 标签并尝试更改其位置属性，它会忽略 z-index 修复

Answer 2

好吧，我已经通过 CSS 修复解决了这个问题。

默认情况下，cufon 文本被赋予一个position:relative，您需要使用position:static 来推翻它。将以下内容添加到您的样式表中。

  h3 cufon,
  h3 canvas {
  position: static !important;
  }

将 h3 更改为您想要应用它的任何元素。您需要将position:relative样式重新添加到Internet Explorer，因为它不能很好地处理position:static。因此，将其添加到 IE 特定样式表中。

 h3 cufon,
 h3 canvas {
 position: relative !important;
 }