【JS】 JavaScript でブラウザを判定して個別に必要な CSS を追加する

この場合は、Fierfox2/3 と Opera9.52 でテストしています

【HTML・CSS】インライン要素に固定幅を与えるのシチュエーションです。

結局 CSS だけでブラウザの違いを吸収するのは無理があります。
このスクリプトを HEAD に入れておけば、本体表示前だし、なんの問題も無いと思います。
( サンプルは、IE 以外で処理していますが、IE 限定の処理でもいいでしょう ※注1)

Firefox2 の場合は、display:-moz-inline-box; と -moz-box-align: center; がいるので、
無条件にいれときゃうまくいくはずですが、ブラウザの例では無くて、JavaScript の例なので。

※ Fierfox と Opera は、エレメント名が小文字になりますが、IE は大文字です。
※ 全部大文字か小文字に変換してから比較するのが本来の方法です。

<SCRIPT language="javascript" type="text/javascript">
if (window.navigator.userAgent.toLowerCase().indexOf("msie") <= -1) {
	style = document.styleSheets;
	rule = style[0].cssRules
	len = rule.length;
	for (i = 0; i < len; i++) {
		if ( rule[i].selectorText == 'h5' ) {
			rule[i].style.cssText = 
			rule[i].style.cssText + ";display:inline-block;";
			// Firefox2 の時のみ実行
			if (window.navigator.userAgent.toLowerCase().indexOf("firefox/2") > -1) {
				rule[i].style.cssText = 
				rule[i].style.cssText + ";display:-moz-inline-box;-moz-box-align:center;";
			}
		}
	}
}
</SCRIPT>

CSS の中身がどんなふうかを見てみたい場合は、以下のページの B の
ここで実行ボタンを押してみると良いです。HTML ソースと比べてみて下さい。
IE用お気に入りプログラム登録

※注1) IE は、rule とって来るキーワードが違ってるので注意