导航栏在 Chrome 中损坏，而不是在 IE 或 Firefox 中

Posted 2023-03-05

【中文标题】导航栏在 Chrome 中损坏，而不是在 IE 或 Firefox 中

【英文标题】：Nav bar is broken in Chrome not in IE or Firefox

【发布时间】：2015-08-23 08:40:11

【问题描述】：

导航栏直到今天都运行良好。它正在破坏 Chrome。但有时经过几次刷新，它工作正常。这就像十分之一。它正在发生。这是magento 1.9.2。 Chrome 版本是 43.0.1

导航栏的文字在工作时为大写加粗体。

.novaworks-navigation #novaworks-nav > li.level0 > a > span 
  line-height: 50px;
  text-transform: uppercase;
  font-weight: bold;

但是当它不工作时，在元素检查期间，这些规则不会出现。出现了一些用户代理样式表。而且文字也不是大写，甚至不是粗体。

i, cite, em, var, address, dfn 
  font-style: italic;

右侧的搜索框也有一个放大镜图标。但现在它也没有出现。 font-awesome 类除了 font-style 之外没有其他规则。它说用户代理样式表。

但是当它起作用时，字体真棒搜索栏的规则是：

.fa 
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

【问题讨论】：

如果您不发布一些代码，我们将无法帮助您

另外，加载页面时出现错误（Uncaught TypeError: jQuery(...).sticky is not a function）

@Vinc199789 谢谢。我仍在弄清楚为什么会这样。

@RyanBeaulieu 嘿，谢谢，我正在调查。但是这个错误是因为这个吗？如何摆脱这个错误。让我看看我能不能摆脱这个。

关于那个错误。 .sticky 不是 jquery 属性，所以你必须有一个插件。确保正确加载插件。看起来你正在使用类似 md5 哈希的东西。如果您向公众发布您的网站，请不要使用它，因为这是一个非常弱的安全性。我使用 md5 并且仅用于测试

【参考方案1】：

问题出在 animate.css 上。它可能与最新版本的 Chrome 43.0.1 有点不兼容。

您必须将一般动画规则放在浏览器特定规则之后：

-webkit-animation: aia2 5s linear infinite alternate;
   -moz-animation: aia2 5s linear infinite alternate;
    -ms-animation: aia2 5s linear infinite alternate;
     -o-animation: aia2 5s linear infinite alternate;
        animation: aia2 5s linear infinite alternate; /* this comes last */

谢谢。希望对你有帮助。