最後の最後になって、IE6での表示が崩れていることに気がついた。
(それまで何やってたんだ)<他の作業が忙しくて確認している暇がなかったんだよ>
で、大急ぎで修正を試みてみたが、どうしても3px分ずれてしまう。
どのレファレンスにもそんなことは書いていない。
で、さすがにリリース前なので上司の方が直接訪れて(まあ、当たり前)、ご相談の結果、3px分widthを縮めた状態でリリースすることになった。
IE6ではこれでどうにか表示できるのだが、他のブラウザでは縮めた3px分不自然なラインが右端に入ってしまった。


どうしても訳が分からなかったので、1時間ほど調べてようやく原因が分かった。
問題の領域(置換ボックス)の前の領域(ボックス)に浮動指定(float:left)がされていて、問題の領域には浮動指定がかかれていなかったのである。
この記述では、IE6の場合だけ、対象の領域に対するwidth指定がおかしなことになる。
余計な3pxを作り出していたのはどうやらこれが原因だったらしい。
実際に問題の領域に対して浮動指定(float:left)をかくと、何事もなかったのように本来の幅に収まった。
が、時既に遅し。
己の無能ぶりに落胆することしきり。
もぉ、だめだぁ。