在IE 8之前，所有IE网站菜单都显示有趣

Question

我是CSS的新手，并用CSS编写了我的第一个网站。我承认还没有完全理解CSS但想学习。我听说过特殊的XHTML＆amp;旧的IE浏览器需要CSS编码，但实际上不知道CSS代码导致了什么问题。

该网站为here。问题是除了Blog和Moodle之外的所有页面上的顶部和底部导航菜单（我还没有更新）。有人可以帮我解决IE需要隔离的问题吗？

非常感谢！

Answer 1

你需要做三件事。

1. 在页面顶部使用严格的文档类型。在你过渡的那一刻。严格的doctype确保IE尽可能符合CSS标准。

2. 为您的热门导航列表项添加以下CSS位

   #topnavcontainer ul li { display:inline; }

3. 为底部导航列表项添加以下CSS位

   #bottomnavcontainer ul li { display:inline; }

Answer 2

另一种解决方案（无论doctype如何都应该有效）;

#topnavcontainer li {
    display:inline-block;
    zoom: 1;
    *display: inline;
}

简短的解释是inline-block允许您设置列表项的样式，就好像它们是块级元素（即，给它们宽度，高度等），同时仍然将它们内联布局。优于float: left的一个优点是，您可以将文字对齐应用于#topnavcontainer，以使您的导航左/中/右对齐。您也可以设置垂直对齐，但有时看起来有点挑剔。

另外两行zoom和*display是在旧版本的IE中使用它的技巧。这是一个很长的解释，但如果你想了解更多，请搜索谷歌“hasLayout”和“css star hack”。