【问题标题】:CSS menu flicker with all browsersCSS 菜单随所有浏览器闪烁
【发布时间】:2014-01-24 05:38:15
【问题描述】:

我的 CSS 菜单(没有子菜单)的 9 个主要导航项中的前 3 个出现闪烁,这发生在 IE、Safari、Firefox 和 Chrome 中,但仅在主页上。

具体来说,第一个菜单项“About”闪烁最多,而“Admissions”和“Academics”都闪烁,但没有那么明显。

我的想法是与主页上的菜单有冲突,特别是主页独有的东西,例如我嵌入到上部导航中的 Google 搜索(并尝试尽可能不显眼地设置样式),或 jQuery 幻灯片。

我已经尝试了这里建议的几种解决方案来解决 webkit 中的闪烁问题,但都没有解决问题。

【问题讨论】:

  • 您是否尝试禁用/删除这两个可疑项目以查看问题是否消失?可能有助于确定根本原因。哦,你有一个在我可以查看的 URL 上运行的开发网站吗?
  • 对不起,我忘了包含网址:spmguardians.org 我已经尝试删除幻灯片/预览并删除 Google 搜索/预览,但都没有解决闪烁问题。谢谢!

标签: css flicker


【解决方案1】:

这似乎是由于您的下拉窗帘太宽造成的。因此,将鼠标悬停在导航项目上会显示它们,然后立即导致鼠标定位在它们而不是导航项目上......导致它们再次被隐藏。因此闪烁(我认为!)。

这不会发生在右侧的导航项上,因为它们足够短,因此在“隐藏”时不会覆盖导航链接。

见下图的宽度。

将 css 更改为 -800px 的较大顶部值,如下所示可能会有所帮助:

.dropdownContain {
  width: 160px;
  position: absolute;
  z-index: 2;
  left: 50%;
  margin-left: -80px; /* half of width */
  top: -800px;
}

【讨论】:

  • 别担心,请您将其标记为正确答案(我正在向 1000 个代表点爬行!)。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2011-06-21
  • 2013-02-21
  • 1970-01-01
  • 1970-01-01
  • 2011-07-27
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多