現在このブログは、IEで表示すると画面中央に「センタリング」された形で表示されるのですが、FirefoxやGooglechromeで表示すると左に寄ったスタイルで表示されます。
これは私が正しくスタイルシートを記述しなかったせい。
センタリングの正しいcssの書き方
一つのDIV要素をセンタリングしたい場合、正しい記述は
margin: **px auto **px auto; /* 上、右、下、左 */
margin: **px auto; /* 上下、右左 */
margin: auto;
のどれかとなります（**は任意の数字）
marginの左右の数値をautoとする事でブラウザはDIV要素を自動的にセンタリングしてくれます。
ところが、IEでは親要素に当たるDIVやBODY要素に
text-align:center;
と、テキストをセンタリング指定する事で子要素のDIVタグまでセンタリングしてくれます。
さらに、この方が初心者のウチは「ピン！」と来やすい。
今までこの罠に思いっきり陥っていました（＾_＾;
現在のレイアウト改造でここも修正予定。
IE7でGoogleやYahooの検索キャッシュで表示が崩れる
▲YahooのキャッシュをIE7で表示すると、ウチのブログは表示が乱れます。
暫く原因が解らず、全く手の打ちようが無かったのですが、今回のブログカスタマイズをやっている途中でようやく閃いた。
YahooやGoogleのキャッシュで表示される場合、標準モード向けにコーディングしたHTMLも、互換モードで表示されるんですね(´Д｀；)
Paddingで左側にスペース取っていた部分が思いっきり互換モード仕様になって表示されているわコレ。
ウチの場合、IE6のみ互換モードでの表示に対応したスタイルシートを別途読み込ませているけど、IE7向けは完全に標準モード仕様でコーディングしている。。。
現在記事左のグレーの帯部分、Paddingでスキマを作っています。ココをmarginで指定し直す事で簡単に解決出来ますが、そうするとDIVタグでコンテナを一つ増やさないとダメ。BODY部分に背景指定してやるのも簡単だけど、今の画像のまま変更ナシだと背景画像が990X800とかバカでかくなる。。。。IE7も最初から互換モードでレンダリングするように設計するのもなんかバカバカしい。。。
これ、どうしようか悩むな(´Д｀；)