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

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

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

仅当IE 8是浏览器时才会起作用。

Answer 2

使用简单的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;
}

适用于Firefox和Chrome;不在IE8上

2 个答案: