IE9 奇怪的高度 - 无法修复答案

【问题标题】：IE9 Weird Heights - Cannot FixIE9 奇怪的高度 - 无法修复
【发布时间】：2013-05-24 20:42:38
【问题描述】：

好的，所以我正在为客户开发一个网站：http://sap-bmc.dreamhosters.com/，它在所有浏览器中都能完美运行，除了 IE9 和 IE8（IE7 似乎出于某种奇怪的原因工作）。

我遇到的问题是首页三栏的这个巨大空间：

由于某种原因，正在添加这个额外的高度。我尝试了以下方法：

.grid3column { height: 300px!important; }

但它只是行不通。有谁知道为什么会发生这种情况？我已经调试了几个小时，根本无法弄清楚问题所在。

【问题讨论】：

【解决方案1】：

您的问题是 IE 以 Quirks 模式显示页面。

原因是 IE 忽略了您指定的 <!DOCTYPE>。

原因是文档类型前面有一些杂散的 HTML 代码。这个乱码在任何情况下都是无效的，因为它是<body>标签之外的正文内容，但除此之外，它在IE中还有一个特定的问题，它破坏了IE对doctype的识别。

文档类型必须是页面中的第一个内容，IE 才能识别它。

如果 IE 无法识别文档类型，它将进入 Quirks 模式。这将破坏您的 CSS 代码的全部负载。这就是你的问题的根本原因。

[编辑]

好的，文档类型问题已解决，但仍然存在 HTML 错误，包括一些不匹配的标签....恰好在蓝色列底部的标签中。

我建议通过W3C validator 运行您的网站，它会向您显示问题。修复验证器告诉您的错误，您将解决问题。

【讨论】：