スタイルシートでボックスレベル要素に枠線をつけるには、border-style属性やborder-color、border-widthで調整するんだけど、ブラウザによって微妙な仕様が違うっぽい。IE6.0とOpera7.23だと、枠線がボックスの内側に反映され、Mozirra1.7.1/Netscape7.1では、ボックスの外側に枠線が反映されるみたい。
たとえば750pxのwidth指定をいれたボックスレベル要素に、10pxの枠線を入れたとする。IE6.0/Opera7.23だと、ボックスの中に左右10pxずつ内側に枠線が入り込むので、実質ボックスの中身は『750-10*2=730』で730pxしかなく、枠線を含めたボックス全体の幅は750pxになる。他方、Mozirra1.7.1/Netscape7.1では、ボックスの外側に枠線が出るので、ボックスの中身は750pxで、枠線を含めたボックス全体の幅が『750+10*2』で770pxになる。
時間かけて正確な検証をしたわけではないので、この解釈が正しいのかどうかわからないんだけど、どうもそうっぽい。どっちがCSSの規格として正しいのかわからないけど、緻密に計算して、ボックスを包んだり重ねたりしたカラム構造に枠線を入れようとする場合など、レイアウトによっては、どうしてもこの問題にひっかかってしまい、ある程度デザインを変更せざるを得ない。一番いいのは枠線を使わないこと、あるいはそのボックスの幅が変わっても大丈夫な構造にしてしまう、とかかなぁ。うぅむ、なんかいい手はないものか・・・。
■追記と訂正
いろいろやってみた結果、Opera/Netscape/Mozirraが同じ仕様でした。外側に枠線が出るのが正常な仕様で、IEがバグだとのこと。IE6.0では最初のHTMLとかXMLとかの宣言の仕方でも、表示がかわるというすごいバグもあるみたい。うううむ・・・。