【普通】【CSS】IEで表示が崩れる問題がようやく解決できました

以前から、IEで私のブログを見るとたびたびレイアウトが壊れてしまう（右のメニューが下に回り込んでしまう）問題が発生していたのですが、本日無事解決することが出来ました。

まずはFirebug liteで原因調査。
IEでFirebugが動くなんて素敵じゃないですか！



すると、現在選択されているこのエントリだけ、offsetWidthの値が6pt大きいことがわかりました。
A-Liaison BLOG 【普通】ちょっと山口まで帰省してきます
おそらく、このエントリーが横に長いせいで右のメニューが押し出されてしまっているに違いありません。

そこで、今度は本格的に調査するために、Firefoxに切り替えてFirebugを起動。
すると・・・



よーく写真のところを見てください。写真がpadding領域にオーバーラップしています！
右下のレイアウト領域を見れば分かりますが、この本文が入る部分のコンテンツ横幅は496pxしかないんです。ところが、ここに載せている写真はwidthが500pxにボーダーが1pxあるため、横幅502pxあり、6pxはみ出てしまいます。
FirefoxやSafari等のブラウザでは、このはみ出た分がpaddingにオーバーラップしてくれるみたいです。（といいますか、paddingは指定してありますがwidthがautoなのでwidthの分を削って表示している？）
ところがIEは律儀にこのはみ出した部分がかぶらないように計算するため横の長さが6pxはみ出ていたんですね。

というわけで、写真の横幅を450pxに制限してみました。


これがIE。


こっちがFirefox。

ばっちりです！