IE7 の CSS ハック
「IE7 で閲覧すると表示が異なるのですが」というご質問を頂いたので、CSS ハックを利用して、IE7 のスタイルのみを変更する方法を紹介します。結論だけ述べますと、IE7 に異なるスタイルを適用する(=他のブラウザと表示を合わせる)場合、該当のセレクタの前に
*:first-child+html
を付与します。例えば、IDセレクタ #banner に適用させる場合、
*:first-child+html #banner {
:
[IE7用のスタイルを記述]
:
}
となります。
なお、それ以外のブラウザのために、元の #banner の設定は、この追加したセレクタより前方に記述します(下記)。この順番を間違えると期待する表示にならないのでご注意ください。
#banner {
:
[IE7以外のスタイルを記述]
:
}
*:first-child+html #banner {
:
[IE7用のスタイルを記述]
:
}
以下で紹介する CSS ハックは、以前、Lucke bag::blog さんが CSS hacks から引用された記事(下記)から内容が変更されているようですので、下手な訳をつけて再掲しておきます。
IE7 およびモダンブラウザ、Opera9 に対応しています。
Lucky bag::blog:IE7 を含むモダンブラウザ向けの CSS ハックまとめ
以下、CSS hacks より抜粋・和訳
ほとんどのCSSハックはセレクタのバグを扱ったものです。以下は、ブラウザバージョンと、要素を選択するためのセレクタの開始部分を示したものです。これらのハックはブラウザのバグや欠けている機能を利用しているので、あまり知られていない、または将来登場するブラウザでは結果が異なるかもしれません。ご注意ください。
セレクタのすべては有効なCSSを使用します。
IE 6 and below (IE6以下)
* html {}
IE 7 and below (IE7以下)
*:first-child+html {} * html {}
IE 7 only (IE7のみ)
*:first-child+html {}
IE 7 and modern browsers only (IE7 とモダンブラウザ)
html>body {}
Modern browsers only (not IE 7) (IE7 以外のモダンブラウザ)
html>/**/body {}
Recent Opera versions 9 and below (最近の Opera9 以下)
html:first-child {}
「IE7 and below」のハックが、「IE6 and below」と「IE7 onle」の、2個の別々のセレクタであることに注意してください。両方のセレクタに、必要とするセレクタの残りを加えなければなりません。また、「IE6 and below」がセレクタを正しく解析することができなくなるので、2つのセレクタをカンマで結合することはできません。
上のセレクタはhtml要素、または body要素を選択します。これは完全なセレクタの始まりとして使用されるべきです。
例えば、あなたが必要とするセレクタが
#foo .bar
であり、それをIE7だけに適用したいのであれば、セレクタは
*:first-child+html #foo .bar
になるでしょう。
以上です。
訳が間違ってましたらご指摘ください。適宜差し替えます。
- サブカテゴリーリストを定義型リストでマークアップする
- CSS でブログ本文の画像だけをセンタリングする
- CSS の画像置換で画像にリンクを設定する
- XREA のバナー広告を固定レイアウトのヘッダに表示する
- Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。
- グローバルナビゲーション(その1:基本スタイル)
- RSS フィードにスタイルシート(CSS)を適用する
- 「追記文章の折りたたみ 2.0」でIE7の不具合を解消する
- サブカテゴリーリストのツリー画像で親カテゴリーのみ異なる画像を表示する
- 公開テンプレートにフッタを追加する(2カラム版)
- CSS の after 擬似要素で回り込みを解除する
- テンプレートカスタマイズ支援ツール Column Resizer
- サイドバーのタイトル背景をカラム幅にあわせて表示する
- 公開テンプレートのサイドバーのカラム幅を変更する
- JavaScript 不要な月別アーカイブの年別ツリー化+折りたたみ
- CSSでブログに影をつける - ドロップシャドウ画像ファイルの作り方
- CSSでブログに影をつける(ドロップシャドウ)
- CSSでブロックレベル要素をセンタリングする
- 3カラムレイアウトをナビゲーションバー部分に適用する
≫ IE 7 のCSSハック from [ VERSION510 ]
各ブラウザのCSSの解釈の違い(バグ)を補正するために、そのCSSのバグを逆手にとって、特定のブラウザに意図したデザインを表示させる裏技(?)... [続きを読む]
≫ IE7のCSSハック from こっから
とうとう、IE7が表示確認のために必要になりました。
でも、IE6も同じく表示確認が必要でしょ。
ということで、両方インストールできる方法を探しました。
... [続きを読む]
≫ IE7用CSSハック from i need the sun
Movable Typeカスタマイズ中ですが、IE7とFirefoxで表示の違い... [続きを読む]
≫ IE7をインストールしてみた from サラリーマン白書
先日、自宅のノートPCにWindows Internet Explorer 7(以下IE7)を遅ればせながらインストールしてみました。 なかなか進まない... [続きを読む]
≫ CSSを使ってHPを作った仕事のまとめ備忘録 from ミヤカワ日記
複数のCSSを外部ファイルにする場合、import.cssを作ろう
import.css内には読み込む外部cssファイルをまとめておくべし。新規でC... [続きを読む]
≫ バグを逆手にプログラミング(CSSハック) from 地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記
livedoor ニュース - 【トレビアンGAME】初代『FF』の飛空艇はファミコンの限界を越えていた!
その飛空艇のスピード、実はファミコンの性能... [続きを読む]
≫ CSSハックまとめ from Mario Design
CSSハックで知ってるものをまとめておきます。
名称があったりなかったり、知らないだけかもしれませんが~ [続きを読む]
≫ WordPressバージョンアップとIE用CSSハック from WordPress & Business メモ
昨夜、WordPressをバージョン2.3.3にアップデートしました。
WordPress2.5がもうリリースされる予定だったので、WP2.3.3にバージ... [続きを読む]

