Opera9.5xでmixiの表示がおかしいのを修正してみた

7月7日にリニューアルしたmixiの一部ページがOpera9.5xにて表示がちょっとおかしい問題がありました。

こんな風にヘッダー部分に異常なスペースが。

見てみると、「メッセージ」と「足あと」の2ページで発生しており、この2ページは2007年10月1日以前の古いコンテンツを流用していることが判明。
その他の新しいコンテンツに関しては問題のないことから、そのあたりに絞り込んで調べたのですが、全く不明…。
古いCSSが当たっているのでは？とも思ったのですが、一応今回大幅にリニューアルされたヘッダー部分に関しては全て新しいclassが与えられていることからその可能性が薄くなりました。ウーン謎。

とは言え、じっくり調べたところ、たった1行のCSSで直りました。

CSS

1. div.headerNavigationBottom,
2. #headerArea div.personalNavigation01 {
3. line-height: 0 !important;
4. }

どうやらどこかのline-heightがぶつかっている可能性が高いようです。
ヘッダー周りの実装に関してはmixi側の新旧のHTML,CSSの違いが影響していることは確かでした。
ですが、Opera9.5xにどこかからline-heightを参照してきてしまうようなバグがある可能性もありますが…。（そこまでは調べませんでした）

気になるOpera9.5x使いの皆様はユーザースタイルシートで対応しておきましょう。

mixi用ユーザースタイルシート　for Opera9.5x

Operaでのユーザースタイルシートの充て方は簡単です。

1. 上記CSSファイルをダウンロードし、適当なフォルダに格納します
2. mixiにアクセスします
3. 空いてるスペースで右クリックしメニューから【サイト設定の編集】をクリック
4. [一般設定]タブの「サイト」に「mixi.jp」と書いてあることを確認
5. [表示設定]タブにてユーザースタイルシート欄に先ほど設置したCSSのパスを記入

以上で完了です。

まだまだ不具合の多いOpera9.5xですが、近いうちに改善されるといいですねぇ。

ちなみに当サイトのタグクラウドも折り返されている部分をマウスオンするとその部分以下が消えちゃいます…（´・ω・｀）