chrome和firefox中的css导航菜单问题答案

【问题标题】：css navigation menu problem in chrome and firefoxchrome和firefox中的css导航菜单问题
【发布时间】：2011-08-17 21:02:53
【问题描述】：

嗨，我已经编写了 CSS 代码来显示菜单栏。遇到这么多问题，用谷歌搜索也找到了解决方案。但是这个我找不到。
这是 chrome 输出，在菜单框之间有间隙，但如果 Firefox 根本没有问题。它的联系方式。我该如何解决？

CSS

#candymenu li {
    list-style-type: none;
    display: inline-block;
    width: 8.1em;
    float: center;
    text-align: center;
    font-family: "Lucida Grande", sans-serif;
    height: 3em;
}
#candymenu ul {
    width: 100%;
    margin:0 153px;

}   


#candymenu li a {
    display: inline-block;
    margin 150px;    
    padding: .5em .5em .5em .5em;
    text-decoration: none;
}

#candymenu li {
    list-style-type: none;
    display: inline-block;

    width: 8.1em;
    float: center;
    text-align: center;
    font-family: "Lucida Grande", sans-serif;
    height: 3em;
    border-right: 1px #818181 solid;
    -webkit-box-shadow: 1px 1px  #bbb;
    box-shadow: 1px 1px  1px #bbb;
}

#candymenu li a {
    display: inline-block;
    padding: .8em .5em .5em .5em;
    text-decoration: none;
    color: #292929;
    text-shadow: 1px 1px 1px #cccccc;
}

#candymenu li {
    background-color: #c9c9c9;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#c9c9c9),    to(#848484), color-stop(0.6, #a1a1a1));
}

#candymenu li:hover {
    background-color: #dc3d73;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#dc3d73), to(#4c4c4c), color-stop(0.6, #474747));
}

#candymenu li:hover a {
    color: #e8e8e8;
    text-shadow: 1px 1px 0px #353535;
}

HTML

<div id="candymenu">    
    <ul>
        <li id="home">
            <a href="">Home</a></li>
        <li id="Gaming">
            <a href="">Gaming</a></li>
        <li id="Reviews">
            <a href="">Reviews</a></li>
        <li id="News">
            <a href="">news</a></li>
        <li id="Interviews">
            <a href="">interviews</a></li>
        <li id="download">
            <a href="">Download</a> </li>
        <li id="support">
            <a href="">Support</a></li>
        <li id="candy">
            <a href="">Candy</a></li>
        <li id="events">
            <a href="">Events</a></li>
    </ul>
</div>

现在我该如何缩小这个差距？

【问题讨论】：

theres "border-right 1px" 我删除了它，间隙减小了，但中间仍然有白色间隙（虽然很小）。另外，整个菜单在 ff 中都很好，但在 chrome 中它有点左移，看起来不太好..原因？任何跨浏览器的 css 代码，一旦编写，在任何浏览器中都不会出现问题？
你能把你目前拥有的东西写成jsFiddle demo吗？或者，添加一个屏幕截图，指出您正在谈论的差距。

标签： html css navigation

【解决方案1】：

http://jsfiddle.net/VXsmd/ 将#candymenu li 和#candymenu li a 的display:inline-block 更改为display:block，然后分别添加float:left。这似乎已经在提供的 Fiddle 中修复了它。

【讨论】：

是的，这就是我要建议的。由于间距问题，水平列表应使用display: block 和float: left 而不是display: inline-block 完成。如果您需要将父项扩展到子项的高度而不是折叠（使用inline-block 的常见原因），请使用overflow: auto 或其他clearfix 解决方案来切换：positioniseverything.net/easyclearing.html

【解决方案2】：

我认为 inline-block 会导致依赖于空白的布局，这很糟糕。

因此，您基本上需要将所有 li-tag 背靠背放置在一行上。像这样：

<div id="candymenu">    
    <ul>
        <li id="home"><a href="">Home</a></li><li id="Gaming"><a href="">Gaming</a></li>

等等

如果成功了请告诉我！

【讨论】：

工作了.. :) 但在 ff 中它很好.. 在 chrome 中它从左边移动了一点......