上传到 Web 服务器后布局损坏答案

【问题标题】：Layout is broken after uploading to web server上传到 Web 服务器后布局损坏
【发布时间】：2011-04-08 05:32:30
【问题描述】：

我开发了一个小型网站（100% css 布局）。我在 IE 和 Firefox 上测试过，看起来不错。在我将其上传到我的托管公司后，Web 服务器布局仅在 Internet Explorer 上被破坏。我的意思是 css 已正确加载，但某些元素不在其位置。我在本地电脑和网络服务器上检查了几次 css 文件，它们具有相同的内容。

例如

#main{
    position: relative;
    width: 960px;
    margin: 0 auto;
}

上面的代码将#main div 放在屏幕的中心。在我的电脑上，它在 IE、Firefox 等上运行良好。但在 Web 服务器上，div 在 IE 上向左浮动

可能出了什么问题？

【问题讨论】：

你能给我们看看不能正常工作的css代码吗？

标签： html css

【解决方案1】：

Internet Explorer 有许多用于确定文档呈现模式的东西。本地或 Internet 上的文档就是其中之一。

添加

<meta http-equiv="X-UA-Compatible" content="IE=edge">

然后检查文件是否一致（两者都损坏或都工作）。如果是这样，那就证实了问题所在，您只需要修复 CSS 以在最佳标准模式下与 IE 一起工作。

Microsoft provide more details.

同时确保您没有使用工具栏上的“兼容性”按钮来强制兼容旧的、漏洞百出的 IE 版本。

【讨论】：

+1，我正在写一个几乎相同的答案。你唯一没有提到的（我要提到的）是按 F12 以查看他在本地和现场处于什么“文档模式”以快速验证问题。
您需要确定 IE7 中的哪些错误导致问题并解决这些问题。
@thirtydot 看起来文档模式在两者上是相同的。如果我的 css 文件有问题，为什么至少 #main 声明不能按预期工作？
听起来文档处于 Quirks 模式。你有触发 Doctype 的标准模式吗？
@prista：如果它在 IE8 兼容模式下不起作用，那么这意味着它在 IE7 中不起作用。我没有看过你的网站，所以我不知道为什么它不能在 IE7 中工作——我不知道。正如@David Dorward 所说，您需要修复您的网站才能在 IE7 中运行。如果您在这方面需要帮助，那么您应该使用有关该站点的更多信息（最好是该站点的链接）开始一个新问题。编辑：查看您的编辑，（在我发表评论之前错过了）我再次同意@David - 如果margin: 0 auto 不起作用，那么您处于怪癖模式。

【解决方案2】：

对于早期版本的 IE，您需要添加一些额外的 CSS 以使内容居中，即：

body {text-align: center};

那么你还需要添加 text-align:left;到第一个子 div，因此文本不居中：

#main{
position: relative;
width: 960px;
margin: 0 auto;
text-align: left;
}

如果浏览器的行为与早期版本一样，我认为这可能是问题所在，因此请尝试将其添加到您的代码中。

【讨论】：