适用于 Firefox 和 Chrome；不在IE8上

Question

我正在尝试使用 Kompozer 创建一个非常简单的网站。我有一个水平菜单，在 Chrome 和 FF 中运行良好，但在 IE8 中运行良好。菜单的 HTML 是：

<div id="hmenu">
<ul>
<li>Home</li>
<li><a href="Portfolio.html">Portfolio</a></li>
<li><a href="Sounds.html">Sounds</a>
</li>
<li>Contact </li>
</ul>
</div>

CSS 中的相关位是：

#hmenu {
  border-style: none;
  text-align: center;
  width: 364px;
  height: 2.5em;
  margin-left: auto;
  line-height: 2.5em;
  margin-right: auto;
  font-family: Bauhaus;
  padding-bottom: 0px;
  font-size: 1em;
}
#hmenu *|ul {
  border-style: none;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#hmenu *|li {
  border-style: none;
  color: #009999;
  float: left;
  width: 85px;
}
#hmenu *|a {
  border-style: none;
  text-decoration: none;
  display: block;
}
#hmenu *|a:hover {
  border-style: none;
  background-color: #66ffff;

如果有人能告诉我如何在所有三种浏览器上进行这项工作，我将不胜感激。 谢谢你。 克里斯。

Answer 1

使用简单的 CSS 选择器：http://jsfiddle.net/nyxyh/5/

#hmenu {
  border-style: none;
  text-align: center;
  width: 364px;
  height: 2.5em;
  margin-left: auto;
  line-height: 2.5em;
  margin-right: auto;
  font-family: Bauhaus;
  padding-bottom: 0px;
  font-size: 1em;
}
#hmenu ul {
  border-style: none;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#hmenu ul li {
  border-style: none;
  color: #009999;
  float: left;
  width: 85px;
}
#hmenu ul li a {
  border-style: none;
  text-decoration: none;
  display: block;
}
#hmenu ul li a:hover {
  border-style: none;
    background-color: #66ffff;
}

Answer 2

IE 通常会出现这些问题。您可以尝试做的（可能比尝试让所有浏览器使用相同的 css 文件更容易）是为 IE 8 制作一个特殊的 css 文件。要添加该 css 文件，只需使用以下代码：

<!--[if IE 8]><link rel="stylesheet" href="CSSForIE8.css" type="text/css" media="screen, projection"/><![endif]-->

这只有在 IE 8 是浏览器时才有效。