使用浮动和绝对定位的IE6站点标题兼容性

Question

在设计和编码一个符合标准的网站之后，它可以在普通浏览器(Firefox, Chrome等)中正常工作，我现在需要使它在Internet Explorer中看起来相同(或大部分如此)，直到Internet Explorer 6。

网站的当前版本可在http://www.adwas.org/test/redesign/找到，问题的最小版本在http://jsfiddle.net/FdS6L/

我遇到的问题是，在带有徽标的区域及其下方，它在IE6(和7，我猜，仍然)中绝对崩溃了。我已经尝试使用star-hack选择器修复了一些问题，尽管它看起来仍然很糟糕。我的问题是:我如何保持标题的大小，并使元素(如果不是完全)可见，类似于它在大多数浏览器中的样子?

注意:

我不反对在IE6中添加JavaScript以使布局工作。(主要适用于子菜单导航)

Answer 1

我试图在您的网站上工作，并得到了这一点:http://jsfiddle.net/3m367/3/。我基本上清理了一些代码并重组了标题，其中栏自动而不是强制全宽(overflow-x是CSS3属性，因此不适用于旧浏览器)。这在IE7及更高版本中显示良好。然而，我偶然发现了一个导航问题- IE6只支持a元素上的:hover伪类，因此像li:hover这样的选择器不起作用。但是，您不能将子菜单放在父菜单项的a元素中，因为您不能在链接中使用链接。我不确定是否可以在不使用JavaScript的情况下在IE6中做下拉菜单。除此之外，导航似乎是目前IE6中唯一搞砸的地方。

Answer 2

与其在#sitenav li上使用float: left，不如试试:

#sitenav {
    display: table;
}
#sitenav ul {
    display: table-row;
}
#sitenav li {
    display: table-cell;
}

您还应该考虑使用条件注释来隐藏一组仅针对ie的样式表，而不受其他浏览器的影响，特别是针对像IE6这样老旧的东西的样式表。如果你不能使用纯CSS和条件注释，你应该考虑尝试HTML5 Shiv并使用HTML5做标记(我相信你应该这样做)。