hatena_waterをIEで表示するとおかしい

コンピュータ

このページはhatena_waterというテーマを使っている。普段ブラウザはFirefoxを使っているので気が付かなかったが、IEで見てみると少し表示がおかしい。たぶん俺のPCの環境のせいではないと思うんだけど、自信はない。OSのフォントの設定も少し変えてるし。ただ、古い別のPCで見ても同じだったので、とりあえずCSSを少しいじってみた。不具合は、はてなアイデアに書く事になっているみたいだけど、不具合なのかどうかもよく分からないし、はてなアイデアの使い方もよく知らないので、とりあえずここに書いておく。
もしまだ見栄えがおかしいという方がいたら、連絡してくれるとうれしいです。


1. 日付の書いてある1日のタイトルの所と記事本文の間に、なんかスキマができる。どうも一番下の背景が表示されてしまっている。別のウィンドウを重ねると消えたり出てきたりする。


以下のページを参考にして、div.day, div.body, h2, div.section, h3のどれかの余白の設定がおかしいのかもしれないと検討をつけてみた。
はてなダイアリーガイド「CSSセレクタ - 日記1日分」とは - はてなキーワード


どう設定していいかよく分からないので、まずbackgroundに白を指定してみるが変わらない。


marginとpaddingを他のテーマのCSSと比較しても同じみたいだけど、とりあえずわけも分からずいろいろ変えてみる。すると、元々

div.section{
padding:5px;
margin:5px;
font-size:90%;
line-height:150%;
color:#333333;
}

という設定になっているが、CSSの設定に

div.section{
padding:0px;
margin:10px;
}

と追加し、上書き(？)してみたら直った。


2. 「最近言及したキーワード」の背景がなくなってる。


keywordcloudの設定を他のCSSと比べてみるが同じ。

div.hatena-modulebody ul.keywordcloud li {
border:none;
padding:2px;
background:url();
}

となっておりbackgroundが指定されていない。しかしkeycloudはhatena-modulebodyで囲まれているので、hatena-modulebodyのbackgroundが適用されそうな気がするが、とりあえず改めてbackgroundを指定してみる。

div.hatena-modulebody ul.keywordcloud li {
border:none;
padding:2px;
background:url(http://d.hatena.ne.jp/theme/hatena_water/modulebody.gif);
}

おお、なんか直った。


3. 「最近言及したキーワード」の一部が消えて表示される場合がある。

これは症状1と似たような原因だろうと考え、まずpaddingを0にしてみる。

div.hatena-modulebody ul.keywordcloud li {
border:none;
padding:0px;
background:url(http://d.hatena.ne.jp/theme/hatena_water/modulebody.gif);
}

おお、なんか直った。


4. 他のテーマと比較していると、「最近言及したキーワード」のキーワードに、リンクの下線がなぜか付いている事に気付く。他のテーマでは付いていない。


他のCSSと同様に

a.keywordcloud0, a.keywordcloud1, a.keywordcloud2, a.keywordcloud3, a.keywordcloud4, a.keywordcloud5, a.keywordcloud6, a.keywordcloud7, a.keywordcloud8, a.keywordcloud9, a.keywordcloud10 {
text-decoration: none;
｝

となっているので、消えていても良さそうな気がするけど、なぜか下線が表示されている。
大元のhatena-modulebodyの設定から変えて、サイドバーのリンクの下線は全部消す事にする。

.hatena-modulebody ul li a {
text-decoration:none;
}

あ、すっきりしていい感じ。


5. サイドバーのリンクの下線は表示しないようにしたが、マウスポインタを当てた時には表示される設定になっている。IEではそのように表示される。しかし、今度はFirefoxの方で下線が表示されない。

div.hatena-modulebody a:hover{
text-decoration:underline;
}

これで表示されるようになった。


6. Firefoxの方で、「最近言及したキーワード」の小さいフォントだけの列の一部で、まだリンクの下線が表示されない。
これもまた症状1と同じような原因っぽく見えたけど、paddingを増やすとIEの方で文字が消えてしまう。
一番小さいキーワードのフォントを少し大きくしてみたら直った。

a.keywordcloud0 { font-size: 90%; }


これでFirefoxとIEではまともに表示されるようになった。今度はNetscapeとOperaで見てみる。
Netscape7.0.1(最新ではない)ではOK。
Opera6.05(最新ではない）でみると、うわー、なんだこれ。背景画像が横にずれてる。とりあえずOpera8.5（最新）を入れてみる。ああ、良かった。ちゃんと表示される。これでいいや。
Sleipnirでも一応試してみる。OK。
さらにThunderbirdのRSS購読機能で見てみる。大丈夫そうだ。


こんなの仕事にしてる人は大変だな。環境のバリエーションがありすぎる。