IE6网站显示问题（背景或填充问题？）
我正在尝试让网站在 IE6 和 IE7 中正确显示。这是 IE6 中的屏幕截图。
替代文本 http://img225.imageshack.us/img225/4779/screenshot20091006at239.png< /a>
IE8、Safari、Firefox等均能正确显示本站。有人可以告诉我 IE6 中造成失真的原因吗？
如果您想查看页面源代码，该站点为： www.devaswami.com
从 < 获取 CSS a href="http://www.devaswami.com/themes/zubrick/style.css" rel="nofollow noreferrer">此处。
I'm trying to get a website to display properly in IE6 and IE7. Here is a screenshot of how it looks in IE6.
alt text http://img225.imageshack.us/img225/4779/screenshot20091006at239.png
IE8, Safari, Firefox, etc. all display this site correctly. Could someone give me a hint as to what is causing the distortion in IE6?
If you want to take a look at the page source, the site is: www.devaswami.com
Get the CSS from here.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
您正在为导航栏使用自动布局表，并且它具有 colspan。这让 IE 感到困惑，因为它不太擅长计算存在 colspan 时需要多大的表。它使表格比您需要的更宽，这使得您的单元格比预期更宽，这使得丑陋的黄色背景显示出来并且不对齐。
要修复它，请设置样式
table-layout:fixed; width: 970px;在表格元素上，并为每一列添加一个元素，每个元素都有一个width: ...px样式告诉 IE 每列到底有多大。这样它就不会犯任何错误（而且更大的固定表格布局渲染速度更快）。为了更好地解决这个问题，请删除布局表并使用定位的 div 作为导航链接。然后，您还可以丢掉愚蠢的图像切片，并为整个标题背景提供一个 GIF，照片和链接位于其顶部。
（此外，修复 HTML 和 CSS 中的验证错误也是值得的。您在样式表中使用
//作为单行注释，但 CSS 中没有这样的东西；您只会让解析器感到困惑并放弃规则。）You're using an auto-layout table for the navbar, and it has colspans. This confuses IE, which is not very good at working out how big tables need to be when there are colspans. It makes the table wider than you need, which makes your cells wider than expected, which makes the ugly yellow background show through and it doesn't line up.
To fix it, set the style
table-layout: fixed; width: 970px;on the table element, and add one<col>element for each column, each with awidth: ...pxstyle that tells IE exactly how big to make each column. Then it can't make any mistakes (and also larger fixed table layouts render faster).To fix it better, drop the layout table and use positioned divs for the nav links. You could then also lose the silly image slicing and have a single GIF for the whole header background with the photo and links positioned over the top of that.
(Also it is worth fixing the validation errors both in the HTML and in the CSS. You are using
//as a single-line comment in your stylesheet, but there is no such thing in CSS; you will only confuse the parser into dropping rules.)嗯，乍一看，你有一些东西是左浮动的，并且上面还有边距？
Ummm at a glance, you have something that is float left and you have a margin left on it?
有很多可能性，很难仅根据屏幕快照进行猜测。然而，让 IE 6 和 7 表现更好的一大步是在文档顶部声明文档类型：
这适用于 HTML 4.01，如果它不是 HTML，则必须更新它以匹配您专门使用的内容（即XHTML）。仅此一项就可以帮助解决一些基本问题，但不能解决全部问题。如果这不起作用，请搜索“IE6 css hacks”，您会发现许多可能适用于您的上下文的潜在信息。
There's a lot of possibilities and it's hard to just guess based on the screensnap. However, one big step towards making IE 6 and 7 behave better is to declare the doctype at the top of the document:
That's for HTML 4.01, you'd have to update it to match what you're specifically using if it's not HTML (i.e. XHTML). That alone helps with some of the basic problems, but not all of them. If that doesn't do it, Google "IE6 css hacks" and you'll find lots of potential information that may apply to your context.
编辑：我建议您修复与丢失/不正确的结束标签相关的错误：
： http://validator.w3.org/check?uri=http%3A%2F%2Fdevaswami.com%2F&charset=(检测+自动)& ;doctype=Inline&group=0
完成后我们可以推断这不是与标记相关的问题。
原始答案：
尝试将 haslayout 应用于每个元素，并在任何浮动元素上使用
display:inline：对于由 Zoom:1 固定的任何内容，应用宽度/高度，这将触发 hasLayout。
不过，如果您实际发布了一些源代码，它可能会很有用。
Edit: I suggest you fix the errors related to missing/improper end tags:
Source: http://validator.w3.org/check?uri=http%3A%2F%2Fdevaswami.com%2F&charset=(detect+automatically)&doctype=Inline&group=0
After that's done we can deduce that it's not a markup related issue.
Original answer:
Try applying haslayout to every element and using
display:inlineon any floated element:For anything that was fixed by the zoom:1, apply a width/height and that will trigger hasLayout.
Though it might be useful if you actually posted some source code.