Question

我有一个基于主题的静态网站。 CSS没有被触及，但最近导致它破裂。我有点困惑，因为我没有做任何更改所以我检查了示例网站，它也被打破了。我与作者核实过，没有新的变化，但他们也注意到它现在已经被打破了。

所以问题。在Safari，IE，Chrome和Edge上，有一个怪异的标题很奇怪＆＃34; pop-in（？）＆＃34;在页面加载。所有元素立即向下移动。 Firefox运行正常。

在此页https://mmistakes.github.io/so-simple-theme/theme-setup/上最容易看到，但会影响主题中的所有页面。

我不是CSS向导，但经过一天的故障排除后，我发现它可能与此CSS选择器有关？我可能完全错了。

#site-nav {
    display: none;
    z-index: 5
}

第二个问题（不太重要）是我想知道在事后可能导致某些事情破裂的原因。我假设其中一个JavaScript库链接在哪里？

非常感谢！

Answer 1

你是对的，你的内容的原因，说＆＃34; pops-in＆＃34;或者简单地向下移动是因为内容只是在加载页面时出现。

要解决此问题，请将CSS初始化为：

＆＃13;

#site-nav {
  height: 0;
  transition: height .2s, max-height 200ms;
  overflow: hidden;
}

＆＃13;

然后在@media 48em让您的css执行此操作：

＆＃13;

#site-nav.closed {
  height: 5em;
}

＆＃13;

这将确保您的内容实际滑入，并且不存在任何突然行为。