在 IE 8 之前的所有 IE 中，网站菜单显示很有趣

Question

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

网站是here。问题出在除博客和 Moodle 之外的所有页面上的顶部和底部导航菜单（我还没有更新这些）。有人可以帮我解决 IE 需要隔离的内容吗？

非常感谢！

Answer 1

你需要做三件事。

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

2. 为您的顶部导航列表项添加以下 CSS

   #topnavcontainer ul li { display:inline; }

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

   #bottomnavcontainer ul li { display:inline; }

Answer 2

另一种解决方案（无论文档类型如何都应该有效）；

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

简短的解释是inline-block 允许您设置列表项的样式，就好像它们是块级元素一样（即，给它们宽度、高度等），同时仍然内联排列它们。 float: left 的一个优势是您可以将 text-align 应用于 #topnavcontainer 以将导航左/中/右对齐。您也可以设置垂直对齐方式，尽管有时这似乎有点挑剔。

另外两行，zoom 和*display 是在旧版本的 IE 中实现此功能的技巧。这是一个很长的解释，但如果您想了解更多信息，请在 Google 中搜索“hasLayout”和“css star hack”。