FirefoxとChromeで動作します。 IE8ではなく

Question

私はKompozerを使用して非常に簡単なウェブサイトを作成しようとしています。私はクロムと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; 

誰かが3つのすべてのブラウザでこの仕事をするためにどのように私を見ることができれば私は非常に感謝されます。 ありがとうございます。 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

通常、これらの問題が発生します。何をしようとすることができます（すべてのブラウザが同じCSSファイルで動作するようにするのが簡単かもしれません）は、IE 8専用の特別なCSSファイルを作成することです。そのCSSファイルを追加するには、次のコードを使用してください：

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

これはIE 8がブラウザの場合にのみ機能します。