GMS表示ずれの件(その2)

皇紀2668年9月14日

 昨日と打って変わって、曇りの天気・・・今ひとつ気分が晴れないσ(o^_^o)のようです、こんにちは。
会社にお勤めの方の中には3連休という人もいらっしゃるかと思います。蒸し暑さも一段落して行楽に出かける人もこれからの時期多くなりそうですね。(ん)

 さて昨日、GMSシステムでの火狐での表示ずれですが、解決しましたぁ~(拍手)

原因はreset.cssの初期化ボックス、
-moz-box-sizing
box-sizing

この2つの指定が border-box となっているのが原因でした。(ん)
「box-sizing」は、mozilla 技術資料によりますと、

 The width and height properties include the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is not in Standards-compliant mode.

 ということで、コンテンツボックスの大きさが、パディング(余白)とボーダー(枠)の幅を含めてしまう指示となっています。
このために、”No0001”表示と、”XXXXさんのメンバー情報です”表示のセンター位置がボーダー幅分だけずれてしまっていたようです。元々この指定はIEとの互換性を保つために用意されたもので、本来は非標準なんですねぇ~(しょぼ)
 

ここにもIEがCSS標準に、如何に準拠していないかが分かろうものです・・・(かなし)

 そこで対策としては、両指定を、content-box とすることによってセンター位置が正しく計算されて、無事ぴったり表示されるようになりました。content-box はCSS標準解釈に基づいてボックス領域の計算を指示するものなんですね。(にや)
 IE6やIE7では上記の指定は解釈できないので元々ぴったり収まったというわけです(ん)

 元々、box-sizing 指定は将来のバージョンであるCSS3.0で規格化されるようです(今はCSS2.1)。
火狐さんは将来規格であるCSS3.0規格を先行実装してるようですね。さすがです(すき)スバラシイw

 というわけで、無事解決です(にこ)

 

火狐3.0での表示
火狐