2011-08-16 2 views
0

각 단추의 이미지가 오른쪽으로 떠있는 메뉴 모음이 있습니다. Safari, FF 및 Chrome에서 완벽하게 보이지만 IE7에서는 버튼이 잘 그룹화되어 있지만 메뉴 막대 바깥에있는 다른 브라우저보다 약 50 픽셀 낮게 표시됩니다. 이 문제를 해결하는 방법에 대한 도움말? 고맙습니다!IE Float 문제

http://jsfiddle.net/mE2b8/

내 CSS :

#menu { 
     width: 100%; 
     height: 58px; 
     background-color: #00653a; 
    } 

#menu_mid { 
    width: 823px; 
    height: 58px; 
    margin: 0px auto; 
    background-color: #00653a; 
} 

.menu_links { 
    float: right; 
    display: inline; 
} 

HTML :

문제는 (ALT = "RRT"또는 그래픽) 로고가없는 것 같다
<div id="menu"> 
     <div id="menu_mid"> 
     <img src="assets/img/menu_rrt.gif" alt="RRT"/> 
     <img src="assets/img/menu_contact.gif" alt="Contact" class="menu_links"/> 
     <img src="assets/img/menu_news.gif" alt="Contact" class="menu_links"/> 
     <img src="assets/img/menu_about.gif" alt="Contact" class="menu_links"/> 
     <img src="assets/img/menu_home.gif" alt="Contact" class="menu_links"/> 
     </div> 
    </div> 
+0

어떤 버전의 IE? – kenwarner

+0

죄송합니다. 도움이 될 것 같습니다. IE7 – Vecta

+1

CSS에 문제가 있습니다. float : right와 display : inline을 사용하면 내 책에는 전혀 의미가 없습니다. 삭제 표시 : 인라인 또는 모두 삭제 (기본적으로 img는 인라인 요소입니다). 당신의 문제의 더 의미있는 방법은 list를 생성하는 것입니다 : ul은 id main menu_mid이고 각 이미지는 li 안에 있습니다. 이미지에 따르면 항상 높이와 너비를 브라우저의 안전 시간으로 설정하여 해당 값을 찾고 브라우저가 필수 공간을 미리 예약 할 수있게합니다. – mkk

답변

2

너비가 정의되었습니다. img 요소에 ID를 추가 한 다음 왼쪽으로 띄웠다. 당신이 찾고있는 것 같습니다 : http://jsfiddle.net/mE2b8/3/

+0

float : right 이미 표시 : 블록을 설정하므로이 라인을 삭제할 수 있습니다. – mkk

+0

대단히 고마워요! IE의 여러 버전에서 수정되었습니다. – Vecta