Firefox（内联列表）中带有负边距的换行符问题

Question

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

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

Nota：悬停将为黑色，红色为测试。

此处无法解决：Separators For Navigation :(

Answer 1

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

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

修改：更优雅的解决方案可能是将边框方向（border-left切换为border-right，margin-right改为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;
}