布局在本地主机上看起来不错，但在实时网站上却中断了？

Question

这是一个奇怪的问题。我正在本地主机中构建一个新布局。布局在本地服务器中看起来完全正常；没有错误，没有浮出父框。

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

。

以下是一些屏幕截图：

正常布局（在本地主机上查看时）：

https://i.sstatic.net/NT8t5 .png

布局损坏（在实时网站上查看时）：

https://i.sstatic.net/9QlCz.png（侧边栏浮出框并移动到底部，检查下一个屏幕截图）

https://i.sstatic.net/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 标题中提及它。

这应该是问题的快速修复。