ホームページ作成SEOマニアックス

CSSハックを利用したインターネットエクスプローラー7でのレイアウトずれの対処方法です。インターネットエクスプローラーは、CSSの読み込み方が他のブラウザ（Mozilla系など）と全く違い、しかもバージョンによっても表示の仕方が全く異なり、レイアウトがずれてしまう困ったブラウザです。

• ホームページ作成SEOマニアックス
• 初級編
• 中級編
• 上級編
• お問い合わせ
• リンク集

スタイルシートでサイトのレイアウトを作成していると、様々なブラウザで確認してみるとレイアウトがずれることがある。

特にインターネットエクスプローラー（以降IEと略）...

同じIEでもIE7とIE6では表示の方法が全く違うので、レイアウトが崩れてしまう。

IE以外のブラウザではずれないのに、こいつらだけはどうしようもないほどに崩れる駄目ブラウザである。

そんな駄目ブラウザが日本国内のシェアーの大半を占めているのであわせないわけには行かず...

と言うわけで、ここではIE7だけにCSSを適用させる手順を掲載します。

CSSハックの適用

IEでのレイアウトずれ対処（css）では、IE6でのレイアウトずれ対処だったが、それと併用すればよいでしょう。

IE7の場合は

*:first-child+html

をCSSに記述してやります。

*:first-child+html #body{IE7用のスタイルシート記述}

と言う感じ。

例を挙げると

.explanat
{
	font-size: 12px;
	text-align: right;
	color: #000000;
	padding-right: 15px;
	line-height: 0.7;
	_line-height: 0;
	margin-top: -285px;
	_margin-top: -280px; /*-----IE6用記述-----*/
	margin-left: 350px;
	margin-bottom: 235px;
	_margin-bottom: 241px; /*-----IE6用記述-----*/
}
 /*-----ここからIE7用記述-----*/
*:first-child+html .explanat
{
	font-size: 12px;
	text-align: right;
	color: #000000;
	padding-right: 15px;
	line-height: 0.5;
	margin-top: -285px;
	margin-left: 350px;
	margin-bottom: 235px;
}
 /*-----IE7用記述ここまで-----*/

こんな感じになります。

IEのようなお粗末なブラウザで確認してそれでおしまい！なんて事をすると、後で痛い目にあいますので、
Firefoxで全体のレイアウトを決めてから、IE用にスタイルシートを書き直すようにしてみましょう。

そうすれば殆どのブラウザでレイアウトがずれることなく正常に表示されると思います。

FireFox Add-ons の Edit CSSを使用することで、CSSをリアルタイムで編集することができます。

<<<前の記事へ | 次の記事へ>>> このページのトップへ

Copyright 2008-2009 ホームページ作成SEOマニアックス All Rights Reserved.