はてなダイアリーデザインとIE
Internet Explorer 8 でサイトを見ると、ひどくデザインが崩れるのを発見した。
問題は左右のサイドバーの位置に追加した、リンク付きの画像なのだが、大きく位置がずれていたり、画像が表示されていなかった。
これまでのデザインのソース。
<a href="link_01.html"> <img src="http://xxx01.jpg" height="" wideth=""> </a> <a href="link_02.html"> <img src="http://xxx02.jpg" height="" wideth=""> </a>
1.画像が表示されていなかったのは、 height="" wideth="" が原因でFirefoxやChromeでは数値が記入されていない場合には、記述自体が無視されるのだが、IEでは0px として処理されるようだ。なので、画像の大きさを指定しない場合にはよぶんな記述を削除しなければならない。
2.位置のずれについては、これもまたIEの場合はただ単に画像を挿入すると、画像をできるだけ横に並べようとする仕様らしい。なのではてなモジュールとして div で宣言してやらないと縦には並ばない。
これらのことを勘案してソースを訂正すると。
<div class="hatena-module"> <a href="link_01.html"> <img src="http://xxx01.jpg"> </a> </div> <div class="hatena-module"> <a href="link_02.html"> <img src="http://xxx02.jpg"> </a> </div>
というようにしなければならない。
久々にやられた気がした。