http://hobbit.ddo.jp/tolkien/instrume/lotr1.html

のルビを振ったところ、
IE, Edge, Google Chromeでは正しく表示されますが、Firefoxではルビが上の行や罫線に重なってしまいます。ルビで行の高さが変わることがサポートされていないようです。

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:88.0) Gecko/20100101 Firefox/88.0

hobbit_makoto さん、EarlgreyTea と申します。


はい、たしかに重なってしまいますね。


そういうわけではなく、ルビが指定された箇所は行間が広くなっています。
しかし、ge.css にてルビ文字列に対してなどと設定されていますが、その計算が Chrome でテストした際の想定と合わないため重なってしまっているものと思います。
試しにウェブ開発ツールのインスペクターにて、一時的に上記スタイルを無効化すると重ならずに表示できます。
これとか参考にしてみてはどうでしょう。
https://romly.com/blog/css_ruby/

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:88.0) Gecko/20100101 Firefox/88.0

これはちょっと外れていました。
hobbit_makoto さんご提示のWEBページでは、JavaScriptにてブラウザー判定を行い、読み込むスタイルシートを切り替えていました。
すなわち、Chrome や Edge と、Firefox では別のスタイルシートが適用されており、それがルビ部分の表示の差の直接の原因でした。

ブラウザー判定は User-Agent 文字列に含まれるキーワードで判断しており

(1) キーワード「MSIE」　…　該当：Internet Explorer 10以前
　　→ ie.css を読み込む
(2) キーワード「Firefox/3」　…　該当：Firefox 3.x.x および Firefox 30番代
(3) キーワード「Opera/9」　…　該当：Presto版旧Opera
(4) キーワード「Safari/5」　…　該当：現行のBlinkベースのブラウザー、Safariなど多数
　　→ ff3.css を読み込む
(5) キーワード「Gecko」　…　該当：(2) 以外のFirefox、および派生ブラウザー
　　→ ge.css を読み込む
(6) 上記以外　…　該当：Internet Explorer 11など
　　→ 追加読み込みしない

のようにスタイルシートを追加読み込みさせています。
このブラウザー判定は、かなり昔の状況からメンテナンスされていないように見受けられます。

このブラウザー判定を廃止して常に ff3.css の内容が適用されるように変更していただければ、
ひとまず問題は解消すると思います。

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:88.0) Gecko/20100101 Firefox/88.0