適用於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是瀏覽器時，這纔會有效。