「position: static;」化への長い道のり　2004-7-4　

　「div.day{width: 100%}」としたときの100%の解釈ですが、現象は分かりました。


　IE6、Opera7.51では、すぐ上の要素(ダイアリならdiv.main、ダイアリの設定ならdiv.hatena-body)に対する100%と解釈されます。
　さらに、自分自身に指定されたマージンやボーダー分、コンテンツ領域の幅を短くします。


　Moz1.7、FireBox0.9.1では、すぐ上の要素に対する100%と解釈されるところまでは同じなのですが、自分自身に指定されたマージンやボーダー分 コンテンツ領域の幅を縮めることなく、元の長さの100%を踏襲します。
　-moz-box-sizingプロパティを指定しても、親要素の幅の算出方法が変わるだけで、子要素(div.day)の幅(マージン分の減少とか)の計算に影響しないところがイタイです。*1


　cssの仕様を確認する必要がありますが、直感的にはMoz系ブラウザのバグではないでしょうか。たぶん、Bugzilla行き(^^;



　・・・対策ですが、根本的なものは、まだ見つかりません。
　box-sizingはダメ、marginとpaddingを!important指定してもダメ。
　さて、どうしたものでしょうか・・・。

*1:参考URL: http://www.fromdfj.net/html/border2.html

これまでの進捗　2004-7-5　

　ttp://d.hatena.ne.jp/sasada/20040704#1088971770参照。


　一服中１８６さんのttp://d.hatena.ne.jp/smoking186/20040704#1088950842より。(同じ内容で2回リファ飛ばすのも何なので)

.hatena-body {
 position:relative;
 width:auto;
 _width:100%;
}


は使えます。これ、採用では?
　ただし、根本解決のためには、「position:relative;」を指定した全ての要素に同様の指定が必要かもしれません。


　私の案である

h2 , div.body , img.photo , div.refererlist , div.comment {
     position: static;
}

div.day {
  width: auto ;
  _width: 100% ;
}


もダイアリーやキーワードでは使えます。試してみれば分かりますが、position:staticに変更する分、表示・スクロールも速くなります。


　ただし、グループトップページ(初期設定)の表示が乱れます。(IEのみ)
　これは、キーワード・リストモジュール(diary形式)のdiv.dayの親要素がtdタグになっている場合、IEでの領域計算に問題があるためかと思います。(違うかも?)


　キーワード・リストモジュール(<:hatena name="keyword" template="diary">)のタグ付けを変えるか、グループトップページ用に「td.main div.day {}」の設定をhatenaテーマに加えれば、回避可能かと思います。(具体的にどうすればよいのかは、まだ考えてませんけど・・・)
　が、汎用性にかけるかもしれません。要検討です。



追記: (2004-7-5 11:18くらい)
　上記、一応解決しました。

td.main div.day {
  _width: auto;
}


を追加することにより、表示の乱れは止まりました。