CSS菜单问题与IE8 - 调试

这是一个简单的css菜单this page.它在Chrome中正常工作。这是我正在使用的相关CSS。CSS菜单问题与IE8 - 调试

ul#list-nav { 
    clear:both; 
    list-style:none; 
    margin:0 0px; 
    padding:0; 
    width:100%; 
} 
ul#list-nav { 
    list-style:none; 
    margin:0px; 
    padding:0; 
    width:100%; 
} 
ul#list-nav li { 
    display:inline 
} 
ul#list-nav li a { 
    text-decoration:none; 
    padding:5px 0; 
    width:16.62%; 
    background:#754C78; 
    color:#eee; 
    float:left; 
    text-align:center; 
    border-left:1px solid #fff; 
}

这主要与width一个问题，而且在与右侧的最后两个单元发生的，因为他们是稍微蘸一些奇怪的事情？

我欣赏任何建议。

谢谢

塔拉

来源

2011-08-02 Tara

第一次尝试简化了整个事情，因为有更多的矛盾;像在Fx中浮动的宽度不够;在Opera中也会出现最后两个按钮的碰撞;例如，为什么你在锚上有一个'float：left;'，而父'LI's已经有'display：inline;'，这会导致类似的效果... – feeela

该网站对我而言显得很好所有的浏览器，虽然看着你的代码我可以看到你没有用分号关闭'display：inline'。 – tw16

@Tara无论在所有浏览器中看起来都不错。问题在于代码中的基本事物。如果将每个“菜单li”的宽度设置为与顶部图像中的白线相匹配的宽度，菜单的整体宽度将会过大。不多，但仍然。我可能会设置它们的高度，以便它只填充800px宽度的区域，然后设置边栏和顶部图像的宽度，使其与菜单相匹配。我记得你使用chrome。在Chrome中，如果你右键点击任何地方，你应该看到列表中的Inspect元素使用开发人员工具来检查元素它有很大的帮助 – Joonas

移除padding-left宽度和增加38px和padding-right

ul#list-nav li a { 
background:#754C78 none repeat scroll 0 0; 
border-left:1px solid #FFFFFF; 
color:#EEEEEE; 
float:left; 
padding:6px 38px; 
text-align:center; 
text-decoration:none; 
}

来源

2011-08-02 09:58:30

CSS菜单问题与IE8 - 调试

回答

相关问题