使这个CSS在IE6中工作

使用此页面：http://www.karlsenner.dreamhosters.com/about.php并且在IE6中导航时遇到问题。它被验证为XHTML 1.0 Transitional。适用于FF，IE 8，Chrome和Windows Safari。在IE6和Opera 10中，下拉菜单显得太高。使这个CSS在IE6中工作

我试着在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来获取导航图像的宽度，并将它们写入风格。 IE解决了宽度问题，因为它们应该从包装器继承它们的宽度。这可能是为什么他们不出现在他们的导航图像下的线索，但我无法对其进行分类。

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

任何建议非常感谢！

来源

2010-04-16 jerrygarciuh

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

你使这种内联DIV，但它真的不是一个内联DIV。它的使用更像一个display: block;

在IE6 .navImage呈现像块，这就是为什么你看到不同之处。

你应该.navImage一个display: block;和使用float: left;

还记得来清除浮动。

那么你top:14px将改为top: 102px;

来源

2010-04-16 21:54:25 vinhboy

谢谢！这绝对解决了这个问题。我的布局创造了更多，但我现在走在了正确的道路上！多谢！ http://www.karlsenner.dreamhosters.com/alt.php – jerrygarciuh 2010-04-16 22:06:55

使这个CSS在IE6中工作

回答

相关问题