2012-09-07 2 views
0

내가 HTML 다음 한 메뉴를 정렬되지 않은 텍스트처럼IE9의 CSS를 제대로

ul#menu { 
    padding: 0 0 2px; 
    position: relative; 
    margin: 0; 
    text-align: left; 
    display:inline; 
} 

ul#menu li { 
    display:inline; 
    list-style: none; 
} 

ul#menu li#greeting { 
    padding: 10px 20px; 
    font-weight: bold; 
    text-decoration: none; 
    line-height: 2.8em; 
    color: #fff; 
} 

ul#menu li a { 
    padding: 10px 20px; 
    font-weight: bold;  
    line-height: 2.8em; 
    padding: 8px 15px; 
    text-decoration: none; 
    font-weight: bold; 
    color: black; 
    float: right; 
    font-size: 20px; 
} 

ul#menu li a:hover { 
    color: #c00; 
    background-color: aliceblue; 
} 

ul#menu li a:active { 
    background-color: #a6e2a6; 
    text-decoration: none; 
} 

ul#menu li.selected a { 
    background-color: #fff; 
    color: #000; 
} 

이 크롬에서 잘 작동, 파이어 폭스에 그것은 단지 FB도 잘 작동합니다 그게 큰 문제가 아니라는 것을 보여주지 못한다. 하지만 IE에서는 모든 메뉴 링크가 왼쪽에있는 것이 끔찍합니다. 나는 많은 것을 시도했지만 그것을 해결할 수 없다. 아무도 내가 뭘 잘못하고 있는지 볼 수 있을까?

How it looks in IE

+0

당신이 바이올린 또는 링크를 만들 수 www.w3schools.com/html5/tag_nav.asp*에서 귀하의 사이트에 우리가 IE에서 볼 수 있도록? – zenkaty

+0

사실 내 localhost에 그것의 snagit을 게시 할 수있는 바이올린을 만드는 방법을 잘 모르겠어요? – NoviceMe

+0

저는 snagit에 익숙하지 않지만 원하는 도구가 무엇이든간에 IE에서 볼 수 있습니다. – zenkaty

답변

0

확인하여 nav 요소의 스타일 또는 잘못된 위치 또는 폭의 제한 또는 원하지 않는 여백/패딩 ul 요소입니다.

실제로 앵커가 떠 다니고 이미지와 같은 앵커가 아닌 경우에도 이미지를 플로팅하여 일관성있게 유지하려고 할 것입니다. 별도의 노트에

는 마크 업이 매우처럼 단순화 할 수있다 :

<nav> 
    <a href="/html/">HTML</a> 
    <a href="/html5/">HTML5</a> 
    <a href="/css/">CSS</a> 
    <a href="/css3/">CSS3</a> 
    <a href="/js/">JavaScript</a> 
</nav> 

* 예를