Joomla! Reference - オープンソース CMS Joomla!の参考書（Joomla!の使い方解説）

「IE6での表示問題」への対応策

1. クライアント（依頼者）のブラウザを最新バージョンにアップグレードしちゃう
2. クライアント（依頼者）に「『Firefox』『Chrome』は使いやすいですよ〜」「『Safari』は表示がキレイですよ〜」と吹き込む
3. IE6でも思った通りに表示されるように、CSSに手を加える

1と2の方法が簡単そうだけどちょっと現実的ではないので、3の方法でいきましょう(･_･、)

IE6での表示が崩れてしまう場合の「よくある原因」

ますは、原因を探りましょう(^^)v

例えば、『3カラムのレイアウトで「左サイドバー」「メインコンテンツ」「右サイドバー」をfloatで指定する時等に、Firefoxで見ると3つ横に並べて表示されてるのに、IEで見ると右サイドバーがレイアウトからはみ出しちゃった結果ストンと下落ちて表示されちまう。』なんて事があったりすると思います。

こんな時の考えられる問題

• widthとpaddingを同時に指定した時、ブラウザによって解釈が異なる為に表示が崩れる。
• floatした要素のmarginを２倍の値で解釈されてしまう為に表示が崩れる。
• 左右のmarginを「auto」にしても、ページがセンタリングされない。

この辺の問題をやっつけられれば、それなりに表示されるようになるのではないでしょうか？　これらの問題を解決する為の詳細をご説明すると…

うまく説明できないので、参考になるサイトをご紹介させていただきます。

これらのサイトを参考にさせていただきながら、「どのへんの設定が原因で表示が崩れてしまうのか？」をまず確認します。Firefoxだったら、手っ取り早いのは「Firefox」のアドオン「Firebug」を使って、ブラウザでCSSがどう解釈されてるのか？　CSSのどのへんをどんな風にいじると思ったとうりの表示になるのか？　を確認・試してみる方法があります。ですが、今回の問題はIEでの表示なので、「Firebug」ってわけにはいきません。が、IEにも「Firebug」と似たような事ができるツール「IE Develper Toolbar」というのがあるらしいので、これを利用すると良いかもしれません。

原因が見えてきたら、それをどうやって反映させるか？　テンプレートのベースとなるCSS（たいがいはtemplate.css）のある要素のプロパティを追記・修正することで、FirefoxでもIE7でもIE6でもSafariでも似たような見栄えにもっていく事ができれば、それでほぼOKとなるでしょう。しかし、例えば「『A』という要素のプロパティを『イ』としたら、IEでは良くなったけど、FFで表示が崩れてしまった。」なんて事もあるかもしれません。そんな時は「IE用のCSSを用意して、IEで見るときはそのCSSを読み込む」とか、「『IE6だけに適用される』CSSの書き方」などといった手段を使わなくてはならないでしょう。

ブラウザによって、適用するCSSを分岐する方法

CSSを分岐する方法はいくつかあって、「.htaccessを利用する方法」「コンディショナルコメントを使う方法」「@規則によって振り分ける方法」「CSSハック」などがあるそうです。

コンディショナルコメントを使ってIE用のCSSを読み込ませる

個人的には、この方法がわかりやすく やりやすいのではないかと思います。テンプレートによっては既にこの方法を使ってて、テンプレートのCSSフォルダの中に「ieonly.css」なんてのがあって、テンプレートのindex.phpのhead内に「<!--[if lte IE 6]>〜<![endif]-->」なんて記述があったりするかもしれません。あれば、そのIEようのCSSに手を加えましょう。無ければ…

もう少し具体的に解説すると…