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;
}