IE 偏移导航问题答案

【问题标题】：IE offset nav issueIE 偏移导航问题
【发布时间】：2012-11-19 20:50:02
【问题描述】：

在所有浏览器中，我的导航显示都很好，例如 chrome、firefox、opera、safari。

但由于某种原因 ie 拒绝正确显示，更令人沮丧的是它实际上是 1px。

这通常不会打扰我，但它在一个显而易见的地方：

即：

所有其他浏览器：

我使用的代码看起来不错，但这里是：

nav {
font-family: "Myriad Pro", Arial, sans-serif;
width: 280px;
height: 40px;
float: right;
font-size: 14px;
list-style: none;
clear: both;
position: relative;
top: 11px;
}

nav ul { 
float: right;
margin: 0;
height: 40px;
    width:240px
}

nav li {
display: inline; 

}

nav li a {
color: #3BB9FF;
border-bottom: none;
padding: 12px 10px 11px 10px;
margin-left: -3px;
}

nav li a:hover{
color: #3BB9FF;
background-color: rgba(0, 0, 0, 0.3);
}



/********
Shows which page is selected
*/

 nav li.selected {
display: inline; 
}


nav li a.selected {
color: #3BB9FF;
background-color: rgba(200, 200, 200, 0.3);
border-top: 3px solid #fff;

}

我也在使用来自 google trunk 的 ie html5 shim。

对这个问题有任何简单的修复吗？我知道这没什么大不了的，只是令人沮丧。

【问题讨论】：

你添加了
能否给出HTML代码或创建jsFiddle demo。
我可以做得更好，samayres.net 我已经直播了。希望对您有所帮助。

标签： html css

【解决方案1】：

菜单上的 CSS 代码有点奇怪。我认为这就是 IE 表现不佳的原因。尝试以下调整：

nav li {
    //display: inline;
    float:left;
}
nav li a {
    color: #3BB9FF;
    border-bottom: none;
    //padding: 12px 10px 11px 10px;
    //margin-left: -3px;
    display:block;
    padding:10px;
}

还要检查IE中菜单的宽度是否不够。

【讨论】：