【问题标题】:Presence of video affects Cufon text in Safari视频的存在会影响 Safari 中的 Cufon 文本
【发布时间】:2011-02-13 19:17:37
【问题描述】:

网址:http://ghostpool.com/wordpress/slide/

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

【问题讨论】:

  • 如果我将鼠标悬停在视频幻灯片上,标题会重新出现并保持不变......很奇怪
  • @Myles:是的,我注意到了,我会在我原来的帖子中提到。

标签: jquery video safari cufon


【解决方案1】:

在向 Cufon 的创建者询问这个错误后,他回答了这个

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

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

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

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

-西莫 "

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

我还发现使用起来更简单

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

而不是 GhostPool 建议的修复。

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

【讨论】:

    【解决方案2】:

    好的,我已经设法通过 CSS 修复解决了这个问题。

    cufon 文本默认有一个 position: relative,你需要用 position: static 覆盖它。将以下内容添加到您的样式表中。

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

    将 h3 更改为您要应用的任何元素。您需要读取位置:Internet Explorer 的相对样式,因为它不能很好地处理位置:静态。因此,将其添加到特定于 IE 的样式表中。

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

    【讨论】:

    • 我已经实施了您推荐的修复程序,但发现它有自己的问题。例如,如果您使用的字体不能很好地处理 Html 特殊字符,则不能将它们包装在 span 标签中并尝试定位它们。一旦应用了该位置:静态,它就会严重限制您放置 Cufon 文本的方式。我已向开发人员的 git 存储库添加了一个问题单。希望很快能找到解决办法。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-02-04
    • 2018-10-07
    • 2011-08-06
    • 2010-11-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多