布局在本地主机上看起来不错，但在现场网站上就不行了

Question

这是一个奇怪的问题。我在localhost建立一个新的布局。在本地服务器中，布局看起来非常正常;没有错误，没有从父框中跳出

但是当我把它放在实时站点/实时服务器上时，布局突然中断了。侧边栏浮在父框之外，还有一些功能不起作用。

.

以下是一些截图:

正常布局(当在本地主机上查看时):

https://i.stack.imgur.com/NT8t5.png

破碎的布局(当在现场查看时):

https://i.stack.imgur.com/9QlCz.png(侧边栏漂浮在框外并移动到底部，检查下一个截图)

https://i.stack.imgur.com/rSDiK.png

.

我检查了源代码(在本地主机和现场)，奇怪的是两者都完全相似。我真的不知道为什么会这样。任何帮助吗?另外需要注意的是，该网站使用Wordpress作为CMS。

Answer 1

帖子页面和主页的布局不一样。例如，在您的主页上，#primary是#main的子元素:

<div id="main"> 
    <div id="container">
    </div><!-- #container -->
    <div id="primary" class="widget-area">
    </div><!-- #primary .widget-area -->
    <div id="secondary" class="widget-area">
    </div><!-- #secondary .widget-area -->
</div>

然而，在你的帖子页面上，#primary是而不是 #main的子元素，从而破坏了你的CSS并将侧边栏推离页面:

<div id="main"> 
    <div id="container">
    </div><!-- #container -->
</div><!-- #main -->
    <div id="primary" class="widget-area">
    </div><!-- #primary .widget-area -->

    <div id="secondary" class="widget-area">
    </div><!-- #secondary .widget-area -->

Answer 2

请注意，在生产模式下可能会出现缓存加载等问题…这意味着每当你尝试上传新文件时，主机可能会呈现旧版本的文件。

例如，如果你把你的网站上传到主机，你有一个css:

style.css

如果你想改变一些东西，你可以这样做:

1。要求主机服务在你上传新的css后重新启动服务器。

或

2。上传相同的文件，但使用另一个名称，如stylev1.css

记得在html的头部提到

这应该是一个快速解决问题的方法。