이 페이지에서 작업 IE6

Question

에서 작업이 CSS를 얻기 : http://www.karlsenner.dreamhosters.com/about.php와 IE6의 탐색에 문제가. 그것은 XHTML 1.0 Transitional으로 검증합니다. FF, IE 8, Chrome 및 Windows Safari에서 훌륭하게 작동합니다. IE6과 Opera 10에서는 드롭 메뉴가 너무 높게 나타납니다.

나는 http://code.google.com/p/ie7-js/의 다른 버전에 추가하는 시도하지만, IE에서 문제가 해결되지 않았다.

CSS의는 다음과 같습니다

#wrapper { 
    position: relative; 
    display: block; 
    background-color: inherit; 
    margin: 0px auto; 
    padding: 0; 
    width: 900px; 
    min-height: 900px; 
} 

#nav {} 

.navImage { 
    position:relative; 
    display:inline; 
    height:102px; /* added in hopes of helping IE position but no dice */ 
} 

.subMenu { 
    position:absolute; 
    z-index:10; 
    background-color:#FFF; 
    top: 14px; 
    left:0; 
} 

.subMenu a:link, .subMenu a:visited, .subMenu a:active{ 
    display:block; 
    width:90%; 
    padding:6px; 
    margin:0; 
    color:#3CF; 
    font-family:Tahoma, Geneva, sans-serif; 
    font-size:14px; 
    text-decoration:none; 
    font-weight:bold; 
} 

.subMenu a:hover{ 
    display:block; 
    width:90%; 
    padding:6px; 
    margin:0; 
    color:#3CF; 
    background-color:#CCC; 
    font-family:Tahoma, Geneva, sans-serif; 
    font-size:14px; 
    text-decoration:none; 
    font-weight:bold; 
} 

jQuery를 롤오버 :

$('#navcompany').hover(function() { 
    $('#companyMenu').css('display', 'block'); 
    $('#companyImg').attr('src','g/nav/company_over.gif'); 
}, function() { 
    $('#companyMenu').css('display', 'none'); 
    $('#companyImg').attr('src','g/nav/company.gif'); 
}); 

그리고 셀 중 하나. 메뉴가 PHP에서 나오고 IE가 너비를 존중하지 않기 때문에 PHP를 사용하여 nav 이미지 너비를 얻고 즉시 스타일에 쓸 수 있습니다. 랩퍼에서 너비를 상속해야하는 것처럼 IE가 작동 할 때 너비 문제가 해결되었습니다. 이것은 nav 이미지 아래에 표시되지 않는 이유에 대한 단서가 될 수 있지만 정렬 할 수는 없습니다.

<div id="navcompany" class="navImage" style="width:128px"> 
    <a href="about.php"> 
    <img src="g/nav/company_over.gif" name="companyImg" width="128" height="102" border="0" id="companyImg" alt="company" /> 
    </a> 
    <div id="companyMenu" class="subMenu" style="display:none; width:128px"> 
    <a href="about.php">About us</a> 
    <a href="location.php">Our location</a> 
    </div> 
</div> 

대단히 감사합니다.

JG

Answer 1

.navImage { 
position:relative; 
display:inline; 
height:102px; /* added in hopes of helping IE position but no dice */ 
} 

이 인라인 DIV하고 있습니다,하지만 정말 인라인 DIV 아니다. display: block;

IE6에서는 .navImage이 블록처럼 렌더링되어 그 차이가 나타납니다.

당신은 .navImagedisplay: block;을하고 float: left;

은 또한 당신의 수레을 취소 기억 사용해야합니다.

이 그런 다음 top:14px이 top: 102px;