仅在使用 chrome 刷新时出现 CSS 错误

Question

我的new site 上有一个令人讨厌的 CSS 错误。 这是 chrome only 的随机错误。它通常在第一次访问时出现，在刷新 (F5) 或调整窗口大小时消失。要让它重新出现，您必须刷新页面（有时最多 10 次）。

当错误出现时，菜单栏的两个链接（“博客”和“Qui suis-je”）像素太低，并且超出了 chrome 的计算机 css 框（在开发人员工具中）。

_{（来源：ksxav.net）}
]

这是一个有和没有错误的 gif：

在谷歌上搜索后，我尝试了以下方法：

• 修复 Varnish 以避免 304 错误（错误描述为 here）
• 我尝试将所有以@import url(css url) 为目标的CSS 内容复制到主CSS 文件中（描述为here）
• 删除我所有的自定义 css
• 我能够在 4 台不同的计算机（相同的 Chrome 版本）上重现该错误

同样的结果。我还在主题的开发者网站上看到了同样的内容（here。请记住，有时您必须刷新/关闭并重新打开选项卡才能查看它）。

有人有想法吗？该主题的开发者说他无法重现该错误，但正如我所说，我在 4 台不同的计算机上看到它...

谢谢。

这里是信息：

• Chrome 44.0.2403.89，完全没有插件
• Wordpress 已更新 (4.2.3)
• 主题是最新的

Answer 1

这看起来像是垂直对齐问题，但可能不是。不过，您可以在这里做几件事来试图解决这个问题：

1. 放置浮动

   li 中的 a 子元素是浮动的。这不是必需的，我建议删除它们。

1. 假的

   您没有理由必须依赖实际的文档流来将其显示在您想要的位置。我要提前警告你，这个写起来感觉很恶心，但效果很好。

在您原来的 a 元素上

• 将a 的文本复制到一个跨度，然后将其放在另一个旁边

  示例

 <a href="/place/on/my/site">Mes chiennes</a>
 <span>Mes chiennes</span>

• 设置以下 CSS 规则：

 #nav li {
   position: relative;
 }
 #nav li span {
   visibility: hidden;
 }
 #nav li a {
   position: absolute;
   display: block;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

• 这有点像巫术，我们让 span 保留单词所需的实际空间，然后强制元素在选项卡中完全居中显示。 transform 位只是拖动它，因此元素的中心位于您提供的 top 和 left 坐标处，因此请随意与它们一起玩以将它们带到您想要的位置。

希望对您有所帮助。