适用于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; 

我会很感激，如果有人能告诉我如何使所有三种浏览器这项工作。 谢谢。 Chris。

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是浏览器时，这才会有效。