メニュー表示が突然二段になってしまった。

BizVektorで作った 6分割表示のメニューを持ったサイトのメニュー表示がある時、突然二段表示されるようになってしまいました。これは調べてみると、ブラウザの表示倍率を90%など100%未満にすると発生することが分かりました。ちなみにこの現象はFireFox、Chromeでは発生しましたが、IE11では発生しませんでした。

ブラウザの表示拡大を90%にすると、メニュー表示が二段になってしまう。

これはBizVektorのメニュー表示の特性から発生すると考えられます。
つまり、FireFoxの開発ツール３Dデバッグでメニュー選択の状態を見ると、選択されていないメニューの幅が、選択されて時に微妙に大きくなります。この制御を行っている場所を探すとBizVektorの/wp-content/themes/biz-vektor/inc下のtheme-options.phpのMenu divide部であることが分かりました。

ここで、アクティブメニューの幅とノンアクティブな状態のメニュー幅が、各分割数ごとに決められています。各分割数ともメニュー幅合計を計算すると949で、メニュー領域幅の950以下でした。しかし、これに画面の拡大率が加味された時に、ブラウザがどのような計算をしてコマンドの表示をしているかは不明です。もしこの処理でメニュー幅合計がメニュー領域幅を超えてしまえば最後のメニューが一段下に回り込んでしまうでしょう。
そこで、この二つのメニュー幅に両方とも同じ値を入れてダイナミックな変化をなくしてみました。

すると、予想通りブラウザの表示倍率を100%以下にしても最後のメニューが一段下に回り込むことはなくなりました。