css - Why does my content shift when I reload the page?

Question

So my site is locked at the top of the browser which is correct, however when I hit reload (command + R) on this gallery page it now vertically centers everything which is not what I want. It's a template based site (squarespace) with stuff I have added.

I added this css:

#canvas { top: 0 !important; margin-top: 0 !important;}

and this HTML

<script type="text/javascript">
window.onload=function(){
document.getElementById('canvas').removeAttribute('id');
document.getElementById('canvasWrapper').removeAttribute('id');}; </script>

Answer 1

首次加载页面时，您有一个没有内联样式的 div（ID 类似于“yui_3_10_1_1_1376940471763_412”）。所以一切看起来都很好。

当您重新加载页面时，该 div 不再具有 ID，而是添加了一个内联上边距，显然是通过 Javascript 将您的网站推倒的。

同时，您的代码毫无意义。您已将 CSS 应用到 id="canvas" 的 div，然后使用 Javascript 删除该 id，使您的 CSS 没有任何可应用的内容。

删除它后，您的页面也会引发 JS 错误，因为 site.js 中的 SquareSpace 函数正在寻找您已删除的 ID。

我会尝试删除您添加的 JS（保持“canvas”和“canvas-wrapper”完好无损）。您的 CSS（带有“！important”标签）应该覆盖 SquareSpace 添加的任何内联样式。