かえでのWebログ

adiary記事タイトル部の構造は下記のようになっています。

• h2
  • a.switch
  • a
    • span.date
  • a
    • span.title

作成中のCSS

[album:adiary/theme:mizuho_h2.jpg]
h2の内側にあるspan.date, span.titleをblock要素に変更し、上記の画像のように配置するためのCSSのソースは以下のようになります。

div.day h2 {
background-image:	url("article-top.png");
background-position:	top left;
background-repeat:	no-repeat;
margin:			0;
padding:		24px 32px 0 32px;
min-height:		38px;
_height:		62px;
}

div.day h2 a.switch { display: none; }

div.day h2 span.date {
display:		block;
background-color:	transparent;
width:			476px;
text-align:		center;
line-height:		20px;
margin:			0;
margin-top:		-20px;
padding:		0;
}

div.day h2 span.title {
display:		block;
width:			436px;
background-color:	#5eb4bb;
text-align:		center;
margin:			0;
padding:		0.3em 20px;
_width:			476px;
}

このソースをIE6に適用する

[album:adiary/theme:mizuho_h2_ie.jpg]
上記の画像のようにレンダリングされます。

1. h2で指定した背景画像がspan.title部で呼ばれている
2. h2で指定したブロックの内側のサイズ(height)が無視され後続のブロック(div.body)と隣り合ってしまっている

解決策

1つめの問題は
span.date{ _padding-bottom: 1px; }
とすることでh2で指定した背景画像が呼ばれなくなります。

2つめの問題は解決策を見つけることができませんでした。
仕方がないのでspan.title部のpaddingを大きく取りh2部のサイズを62px以上になるようにしましたが、根本的な解決にはなっていません。

愚痴

テーマ作成の度に上記のようなIEのバグに対する解決策を手探りで探すことになり非常に辛い。CSSで利用できるプロパティも制限されるし。何故みんなそんなにも時代遅れでバグだらけなブラウザが好きなんだ？