時々、movabletypeで作られたサイトをwindowsのIE(6.0)で閲覧している時に、「主にエントリーが左側、メニューが右側に作られていて」 かつ 「Brogroll」を使用しているindexページで、
何故か途中でスクロールバーでスクロールできる範囲の外に、エントリー群が描画される事があります。その場合はスクロールできないので、内容を読む事が出来ません。といってもわかりにくいので例を。 （XHTMLソースでトラブルの状況が見れるのは、恐らくwin版IEでのみです。ただ、発生環境がいまいちハッキリしないので、↓のソースからトラブルが確認できる方は、どういう環境でアクセスされたのか、コメント欄に残していただけると幸いです）
本来ならば、
XHTMLソース →http://nanitozo.com/log/euri/archives/20030905/index01.html
画像 →View image
となるべきなのに、
XHTMLソース→http://nanitozo.com/log/euri/archives/20030905/index02.html
画像→View image
のような事態になっているサイトをたまに見かけます。ウィンドウをリサイズすると、スクロールバーは正常に戻るんですが、、それに気づかないと、index上のエントリーの大半が閲覧できません。
このトラブルについてちょっと調べてみました。
なお、Mac版IEでの検証は行っていません。とりあえずwindowsのIE6.0で、このスクロールの不具合を確認しています。
＃最終更新 - SEP 07,2003 / 発生条件に追加。
このトラブルの原因として、どうやら、IEの"float"の解釈がバグ含みのようです。
ただ、再現性が微妙で、実際のところ良くわかりません。個人的に現段階で把握しているのは、
Windows2000、ME、（ＸＰの一部？）のIE6.0の環境下で、float属性をかけられた要素と、それにより回り込む要素がページのサイズ、スクロールを規定するような時に （わかりにくい説明でごめんなさい、、なんて言ったらいいやら、、）
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">というXML宣言をしている。
2. float属性を付加した要素のwidthをpxピクセルではなく %パーセンテージで指定している。
3. float属性を付加した要素に対して回り込む要素に対して、widthを指定していない。
4. float属性を付加した要素に対して回り込む要素の中で、Javascriptのdocument.writeなどによって動的に内容を描画している。かつその内容の描画のタイミングが、ページ全体の描画のタイミングとずれる（Javascriptのソースの置かれたサーバが、ページ自体がおかれたサーバとは別にある場合。blogroll等）
5. float属性を付加した要素に対して回り込む要素の終わりで、<br clear="all" />等によって回り込みの解除を宣言していない
という時にこの問題が発生するようです。発生条件自体、相当シビアなので普通はあんまり気にしなくてもよさそうなんですが、movabletypeのデフォルトのテンプレート＆blogrollを使った場合は、条件の1から4はそれだけで満たしてしまうので注意が必要です。
movabletypeのデフォルトのindexテンプレートでは<div id="links"></div>の間の最後の方に、<br clear="all" />で回り込みを解除しているので、問題は無いはずですが、このタグはどう動いてるかわかりにくい為、テンプレートの編集中にうっかり消してしまう場合も多そうです。
その場合は多分にドツボにはまるので注意してください。
＃発生条件3に関しては、ARTIFACT －人工事実－の加野瀬さんに報告して頂きました。どうも有難う御座います。
＃ブラウザ環境等については、ブログBLOGを楽しむＭＬの abexさん、e-docさん、mdlmさん、kyoさん、ookawaさん、s.s.さん、Sanderさん、Naotoさんに報告して頂きました。どうも有難う御座います。
<script language="javascript" type="text/javascript">
window.alert('content = '+document.getElementById('content').offsetHeight);
window.alert('links = '+document.getElementById('links').offsetHeight);
window.alert('body = '+document.getElementsByTagName('body')[0].offsetHeight);
</script>
以上のようなスクリプトを動的生成に使っているスクリプトの前後に置いて色々試してみたのですが、主な犯人は動的生成スクリプトのみのようです。
DOCTYPE宣言によるIE6の標準/互換モードスイッチ自体は大きな原因ではありません。どちらのモードでも条件次第で発生します。
また、非置換要素に対するwidth値の指定自体も、根本的な原因ではないみたいです。その場合、なぜwidth値の指定やclear属性の使用で問題が解決されるのか、のほうがよくわからない現象といえます。
要は、
1.BODY要素のheight値が動的生成スクリプト実行時に上書きされてしまうのが主な問題。
2.ページ内要素に適切なheight値が指定されていない。
3.IEがBODY要素の外にはみ出てしまった内容をレンダリングしない。
のが原因ではないかと。
回避するには、各カラムに適切なheight値を指定するのが一番的確のようです。その際、標準モードでは親要素のheight値が基準になるため、さかのぼってBODY要素にもheight値を指定することになります。実際にはheight:100%;を各カラムに追加するのが良いようです。
細かい点ですが、XML宣言という用語は明かな誤用ですので、修正されたほうが良いと思います。
Posted by: 通りすがり at September 9, 2003 04:48 AM＞通りすがりサン
情報どうもありがとう御座います。
一応こっちでも確認してみて、情報を修正したいと思います。
指摘された以外にも、見直してみるとちらほら不適切だったりわかりにくい表現があるようで、、その辺も修正します。多謝。
あと、、あんま関係ないんですが、height解釈はよく判らんですね。ＩＥとか100%に指定しても親要素と同じ高さにならなかったりしてる？ ←ちゃんと把握しているわけじゃないので、間違ってるかもしれません。
Posted by: euri at September 9, 2003 11:57 PMはじめまして。 nobukoともうします。
私も、このトラブルには待ってしまい、
どのようにトップページを 全文表示できるのやら
困り果てています。
height表示を手直しすると良いようなのですが
初心者のため 困ってしまっています。
main index の テンプレートを いじるのでしょうか。
もしくは stylesheet ？
すみません。 もし よろしければ 教えていただけると
大変助かります。
どうぞよろしくお願いいたします。
あ～すみませんでした！
stylesheet のheight を直してみましたところ
無事 表示されました。
大変申し訳ございませんでした。
どうもありがとうございました。
大変助かりました。