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

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

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

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

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

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

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

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

Advertisement

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をリアルタイムで編集することができます。

Advertisement
CSS(スタイルシート)を使ったサイトで、Safariで見たときにズレてしまう場合の対処法です。(cssハック)
CSSハックを利用したインターネットエクスプローラー7でのレイアウトずれの対処方法です。インターネットエクスプローラーは、CSSの読み込み方が他のブラウザ(Mozilla系など)と全く違い、しかもバージョンによっても表示の仕方が全く異なり、レイアウトがずれてしまう困ったブラウザです。
スタイルシートを使用したサイトが、IE(Internet Explorer)だけレイアウトが崩れてしまう現象の対処法です。

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


■複数キーワードで検索する時は半角スペースで区切ってください
My Yahoo!に追加
IPv4アドレスついに枯渇!
迷惑極まりない問い合わせ
MTおよびMTOS 5.02 セキュリティーアップデート
ロリポップサーバーでのMT公開日時指定投稿(cron)設定
自サイトが悪意のある他サイトにインラインフレーム表示される
Gumblar対策
MTOS 5.0 アップグレード後、携帯サイトが文字化け
MTOS 5.0 アップグレード手順 SQLite
Firefox プロセス終了できない現象
不正なサイト乗っ取りの防止策
MT ファイルアップロード制限変更手順
Apacheサーバーでのindex Of 表示回避手順
SWFなどの埋め込みコンテンツがIE6でエラーダイアログが出る現象
MT4.261アップグレード手順
ロリポップサーバ、ディスク容量増加!
さくらインターネット .htmlをPHPとして動かす
MTOS 4.x インストール手順
MT 4.x ダウンロード 転送 パーミッション変更 SQLiteデータベース作成
さくらサーバーでの Index of 表示をさせない手順
phpのバージョン確認方法
Apache2.2 最新バージョン
PHP インクルード 文字化けする現象
コアサーバーでのcronの設定 MT4.x 日時指定で予約投稿編
サクラエディター 入力改行コードの指定 (LF)
ハッスルサーバーで Service Temporarily Unavailable が頻繁に出る
チカッパphp5バージョンアップ後のphp includeエラー対処
さくらサーバーで.htmlをphpとして動かす
FLVファイルの埋め込みでのIEスクリプトエラー対処
ロリポップサーバーでphp5バージョンアップ時のincludeエラー対処
ハッスルサーバーでMT4.2 PHP化注意事項
格安レンタルサーバーの比較
Google独自ブランドのブラウザGoogle Chrome登場!
Windows MediaPlayer11 でHTML埋め込みwmvが視聴出来ない現象
FLV動画の埋め込み手順
Safariでのcssレイアウトずれ対処
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のインストール(さくらサーバー編)
サクラエディターの使い方
サクラエディターのインストール

サイトマップ