Question

我正在尝试在IE6和IE7中正确显示网站。以下是IE6中的外观截图。

IE8，Safari，Firefox等都正确显示此网站。有人可以给我一个暗示IE6失真的原因吗？

如果您想查看页面来源，该网站是：www.devaswami.com

从here获取CSS。

Answer 1

您正在为导航栏使用自动布局表，并且它具有colspans。这会让IE混淆，因为它不太适合在有colspans的情况下弄清楚大表需要的程度。它使得桌子比你需要的更宽，这使得你的细胞比预期更宽，这使得丑陋的黄色背景显示出来并且它没有排列。

要修复它，请在表格元素上设置样式table-layout: fixed; width: 970px;，并为每列添加一个<col>元素，每个元素都有一个width: ...px样式，告诉IE确切的大小每一栏。然后它不会犯任何错误（并且更大的固定表格布局渲染得更快）。

要更好地修复它，请删除布局表并使用导航链接的定位div。然后你也可能失去愚蠢的图像切片，整个标题背景都有一个GIF，照片和链接位于顶部。

（同样值得修复HTML和CSS中的验证错误。你在样式表中使用//作为单行注释，但CSS中没有这样的东西;你会只会将解析器混淆为丢弃规则。）

Answer 2

嗯，乍一看，你有一些漂浮的东西，你还剩下一个边距？

#foo {
  float: left;
  margin-left: 20px; //20px in all browsers except IE6 where it will be 40px;
  display: inline; //this will fix this issue
}

Answer 3

有很多可能性，很难根据屏幕截图进行猜测。但是，使IE 6和7表现得更好的一大步是在文档的顶部声明doctype：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

这适用于HTML 4.01，如果它不是HTML（即XHTML），则必须更新它以匹配您专门使用的内容。仅这一点就有助于解决一些基本问题，但不是全部。如果不这样做，谷歌“IE6 css hacks”，你会发现许多可能适用于你的背景的潜在信息。

Answer 4

编辑：我建议您修复与丢失/不正确的结束标记相关的错误：

错误第199行，第194列：结束标记   对于未打开的元素“a”

错误第200行，第49列：结束标记   对于未打开的元素“p”

在完成之后，我们可以推断出它不是与标记相关的问题。

原始答案：

尝试将haslayout应用于每个元素，并在任何浮动元素上使用display:inline：

#nav li { display:inline; } /* the selector *must* be floated and have horizontal margins in the direction of the float. */

* { zoom:1; }

对于通过缩放修正的任何内容：1，应用宽度/高度，这将触发hasLayout。

虽然如果您实际发布了一些源代码可能会有用。