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

【问题标题】：Layout Looks Good on Localhost, But Breaks on Live Website?布局在本地主机上看起来不错，但在实时网站上中断？
【发布时间】：2011-09-05 21:45:00
【问题描述】：

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

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

以下是一些截图：

普通布局（在 localhost 上查看时）：

http://i.imgur.com/19rGS.png

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

http://i.imgur.com/rzauG.png（侧边栏浮出框并移至底部，查看下一个屏幕截图）

http://i.imgur.com/kvX86.png

我已经检查了两个源代码（在本地主机和实时站点中），奇怪的是两者完全相似。我真的不知道为什么会这样。有什么帮助吗？另外请注意，该网站正在使用 Wordpress 作为 CMS。

【问题讨论】：

你能发布一个你的实时版本的链接，以便我查看 CSS 吗？
我已经为本地主机和实时站点尝试过 Chrome、Firefox 和 Opera。结果总是一样的：在本地主机上看起来不错，在实时站点上中断。
这里是网站的链接：xaliber.net/gemastiks
运行 fiddler 并查看您的 JS/CSS 包含是否正在加载。
奇怪的是，它在 Chrome 中对我来说看起来非常好。如果您调整屏幕大小，它会起作用吗？

标签： html css css-float localhost

【解决方案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 -->

我希望这会有所帮助。

【讨论】：

我怎么没注意到？显然，一些代码添加了关闭#main 的附加 div ......非常感谢！现在问题显然已经解决了。
虽然我仍然想知道为什么 PHP 在 localhost 和实时服务器中的结果如此不同，但是谢谢！

【解决方案2】：

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

例如，如果您将网站上传到主机并且您有一个 css：

style.css

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

1.上传新的css后，要求托管服务重新启动服务器。

或

2.上传同一个文件，但名称不同，如 stylev1.css

记得在 html 的头部提及。

这应该可以快速解决问题。

【讨论】：