crossdrive 個人的ウェブ日記|ver.2(何日続くかわかりませんが…)


March 20, 2004

暫定スタイル

段組をまたまた調整。position:absoluteに再挑戦。

internet explorerとmozillaのレンダリングを比べた場合の違いをメモ。

今のところ当サイトは、#banner部分の高さを絶対指定でスタイルを固定しております。#bannerのheightを65pxとして、marginのtopとbottomを10pxずつに指定。internet explorerではその合計の85pxが#banner部分のトータルの高さとして計算されている…はず。mozillaでは、それにborderのtopとbottomを併せた8pxとpaddinの5pxを加えた、トータル98pxが#banner部分の高さとして計算されている模様。

その差13pxが表示結果に違いとしてモロに現れることになります。あー参った。多分、mozillaのレンダリングの仕方の方が正しいと思うけれども。じゃあ、それをどうやって解決すればいいかというと、ブラウザ毎の表示結果から少しづつ調整して妥協点(大して気にならない点)を見つけることで解決するという方法しか思いつきません…。もしくは、デザインを一新してborderとpaddinを0とするようなスタイルにすれば解決。

結論:やっぱりfloatが無難かと。


追記

後から上記を読み直してみて、「そりゃおかしいだろ」という考えに至り色々と実験してみました。borderの幅を無理やり30pxとかにして崩して見たり、paddingを50pxとってみたり。

その結果わかったこと。(internet explorerの表示において)

  • paddingはある一定の値を超えるまではボックスのトータルには加算されず、その内側に、えーと、説明できません。
  • borderの幅は(略

Internet explorerのレンダリングはとにかくわけがわからないです。


(#banner部分の高さに何でこんなにもこだわっているかというと、position:absoluteとtop:98pxというような指定をしているので、ブラウザのレンダリングによってのtopからの高さが不安定では困るのです。代替手段を模索中。)


  • top
  • site top
  • mail
  • counter