IE7でのレイアウトずれ対処

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

Sponsor

メニュー一覧

記事一覧

・Firefox3 公開！IE7より9.3倍早い！！！・自宅サーバーでの検索エンジン対策・相互リンクと被リンク・metaタグを知ろう！・go-pear.phpが実行できない場合・SEOを考慮したサイトの引越し（301リダイレクト）・IE7でのレイアウトずれ対処・バックリンク（被リンク）について・Thumbs.db ファイルをFTPに残さない（作らない）・自宅サーバでのwmv埋め込み+Firefox・Mozilla（Apache）・サイト整理=リンク切れのチェック・FireFox Add-ons Edit CSS ・Flash(.swf)の埋め込み-IE・Mozilla系共有・wmvファイル埋め込み（Java Script 編）・wmv動画の埋め込み（IE・Mozilla系共用）・IEでのレイアウトずれ対処（css）・IE6以前でpng透過画像を使用する・フレームセットの利点と欠点・htmlファイル整理｜ディレクトリ毎のファイル整理・検索エンジンを意識したサイトを作る・ホームページのタイトルと内容・MT作成サイトのPHP化手順・さくらサーバーでのPHPサイト構築・PEARのインストール（さくらサーバー編）・サクラエディターの使い方・サクラエディターのインストール

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

特にインターネットエクスプローラー（以降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をリアルタイムで編集することができます。

IE7でのレイアウトずれ対処に関連したエントリー

IE7でのレイアウトずれ対処

IEでのレイアウトずれ対処（css）

スタイルシートを使用したサイトが、IE（Internet Explorer）だけレイアウトが崩れてしまう現象の対処法です。

サクラエディターの使い方

文字コード変換をサクラエディターを使用して行う手順です。簡単に出来る上に動作も軽いのでスクリプトの書き換え等にも重宝します。

サクラエディターのインストール

サクラエディターとは、Windowsで言うメモ帳の高機能型テキストエディターのことです。メモ帳では出来ない機能が充実しており動作も軽いので、HTML作成にはとても便利ですので、今回はインストール手順を掲載します。

<<<前の記事へ | 次の記事へ>>>