IE 渲染问题答案

【问题标题】：IE Rendering ProblemsIE 渲染问题
【发布时间】：2011-11-24 08:19:33
【问题描述】：

我一直在为我的学校网站开发网站模板。我已经完成了所有必要的开发，但现在发现了一个问题。在 IE 中打开站点时，它不会像在 Chrome 或 Firefox 中加载时那样对齐所有内容。我猜有一些 CSS 属性没有被 IE 正确处理（这个问题在宽屏显示器上更明显）。

我已经在这里上传了模板：http://test.victoriaparkci.com/tpl2/

CSS 在这里：http://test.victoriaparkci.com/tpl2/style.css

我该如何解决这个问题？感谢您的帮助。

【问题讨论】：

您在哪些版本的 IE 中遇到问题？ @zzzzBov 弱评论。
所有版本的 IE 都存在问题（虽然我没想到 IE9 会这样做）。 @zzzzBov 我已经进行了网络开发……只是这次我使用的样式有问题。
根据 Adobe BrowserLab，它在 6、7、8 和 9 中表现不佳。

标签： html css internet-explorer

【解决方案1】：

从DOCTYPE Element中删除上面的内容，页面应该以doctype开头

此内容：

<!--VICTORIA PARK COLLEGIATE INSTITUTE SCHOOL WEBSITE

All of this website's material and content is owned by the administration of

    Victoria Park C.I., 15 Wallingford Rd, North York, ON, Canada.

Prior permission must be obtained before use, modification or replication of this website's code or content.-->

【讨论】：

您应该移动评论的原因是因为 DOCTYPE 之前的 cmets 导致 IE 为render in Quirks mode。
+1：这是正确答案。 @Cheran 的评论也 +1，它解释了为什么它是正确的答案（这是真正应该在答案中提出的一点）
感谢大家的帮助！这也解释了为什么模板在早期阶段工作！ IE 真的需要开始跟随浏览器人群了……

【解决方案2】：

我注意到内容 div 无法随着 body_right 的长度扩展。尝试将内容 DIV 浮动到左侧。

#content {
    float:left;
    margin: 20px 0 0 0;
    background:#FFFFFF;
    border:1px solid #ececec;
    padding: 0 10px 30px 5px;
    overflow:hidden;
}

根据我的经验，通常 DIV 不会扩展到其内容长度，因为它不是浮动的。

【讨论】：