html - Firefox 上的负边距换行问题（内联列表）

Question

我正在开发带有分隔符的垂直菜单（仅限 CSS）。为了在悬停时隐藏这些分隔符，我尝试使用边框 + 负边距（取消边框）。但是在 Firefox 上它会创建一个换行符......我该如何解决它？谢谢

http://jsbin.com/akazuf/1/edit（完整尝试输出）

注意：悬停将为黑色，红色用于测试。

这里没有解决方案：导航分隔符:(

Answer 1

如果您根本不想要换行符，则可以添加white-space: pre;到#header .nav a样式中。

https://developer.mozilla.org/en-US/docs/CSS/white-space

编辑：更优雅的解决方案可能是切换边框方向（border-leftto border-right，margin-rightto margin-left：

#header .nav a {
    border-right: 2px solid #000000;
    font-family: 'Cuprum',sans-serif;
    font-size: 14px;
    padding: 0 25px;
    text-transform: uppercase;
}

#header .nav .current-menu-item a, #header .nav a:hover {
    background: none repeat scroll 0 0 #FF0000;
    border-left: 2px solid #000000;
    color: #FFFFFF;
    margin-left: -2px;
    padding: 14px 25px;
    text-decoration: none;
}