css - 为什么当我重新加载页面时我的内容会发生变化？

Question

所以我的site锁定在浏览器的顶部，这是正确的，但是当我在此画廊页面上点击重新加载(命令 + R)时，它现在垂直居中所有内容，这不是我想要的。这是一个基于模板的网站 (squarespace)，其中包含我添加的内容。

我添加了这个 CSS:

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

和这个 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 添加的任何内联样式。