Firefox 및 Chrome에서 작동합니다. IE8이 아닙니다.

Question

저는 Kompozer를 사용하여 아주 간단한 웹 사이트를 만들려고합니다. Chrome과 FF에서는 잘 작동하지만 IE8에서는 작동하지 않는 수평 메뉴가 있습니다. 메뉴에 대한 HTML은 다음과 같습니다 CSS에서

<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> 

관련 비트는 다음과 같습니다 누군가가 방법 세 가지 브라우저에서이 일을하는 저를 보여줄 수 있다면

는

#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이 브라우저 인 경우에만 작동합니다.