サイドメニュー（固定）の文字を縦書きにするとブラウザによって表示が異なります

Question

ページの右側に固定でサイドメニューを表示させているのですが、文字を縦書きにすると一部のブラウザで表示がおかしくなり、直し方がわかりません。

<div id="sidemenu">
	<ul>
		<li><a href="#hogehoge">ほげほげ</a></li>
		<li><a href="#hogehoge">ほげほげ</a></li>
	</ul>
</div>

#sidemenu {
  position: fixed;
	top: 100px;
	right: 0;
}
#sidemenu ul li a {
  display: block;
  color: #fff;
  background-color: #000;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  padding: 20px 10px;
}

Safariで見ると文字が半分ほど埋まってしまい、firefoxで見るとright:0にしているにも関わらず20pxほどの余白ができます。
最悪画像で書き出すことも考えていますが、もし直し方がわかる方いらっしゃいましたらご教示いただけると幸いです。

Answer 1

ChromeのバグなのかChrome以外のバグなのかわかりませんが、とりあえず width を指定すると上手くいくようです。

例

#sidemenu ul li a {
  ...
  width: 1.5em;
}

Comments

[pppx]

遅くなり申し訳ございません。ご回答ありがとうございました！
emで入れると文字の位置は良いのですが、背景色が置いてけぼりな状態になってしまったので
vwで適当な数字を入れてなんとか調整することができました！（とはいえブラウザごとにそれでも若干サイズが異なりますが…）
こうもブラウザによって大きく異るものを見るのは久しぶりです。。バグであれば修正されることを祈るばかりですね・・
教えてくださり、ありがとうございました！！