昨日「IE7をやっとインストール」でそれほど大きなデザインの崩れはなかったと書いたのだが…。
考えてみたら、Firefox（and Opera） と IE7 で崩れないデザインに修正したわけだから IE6 では崩れてしまっている。
ちょっと面倒臭くなってきたなと思い放置しようかとも思ったのだけれど、日本語版の自動アップデートが始まるまではまだまだ主力は IE6 なわけなのでやはり修正することにした。（すべての PC の IE を Ver.7 に移行してしまったためサブ PC を復元し IE6 に戻すなど手間がかかった）
そこで、できるだけ多くのブラウザ――とは言っても Win の IE6、IE7、Firefox（Mozilla）、Opera 以外は無視――である程度意図したデザインになるようにしたいわけだが、まず下記魔法の命令は IE7 には通用しないのですべて削除（これは前回も書いた）
* { -moz-box-sizing: border-box; box-sizing: border-box; }
これを削除し、CSS に準拠したボックスモデルで再構築すると IE6 が崩れてしまうわけだ。
そこでどのように修正すべきなのか調べてみたら、この問題をあっさりと解決できるページを見つけその通りに CSS を記述したら簡単に修正できた。この手の問題は今までの経験上、こちらを直せばこちらが…みたいに一発で解決できるとは思っていなかったのでよかった。
参考:
http://www.deftrash.com/blog/archives/2006/10/ie7doctype.html
要するに、IE6 用にこんな風に記述。
width: 180px;
_width: 200px;
多くのブラウザ用に使う通常の width の下にアンダーバー（アンダースコア）付の _width を記述し、IE6 がアンダーバー付のプロパティを読み込んでしまうバグを利用するわけだ。
ちなみにこの話は CLUB.AKITOMO.NET のデザインには無関係の話。