IE7 の CSS ハック: 小粋空間

Top ＞ CSS ＞ IE7 の CSS ハック

IE7 の CSS ハック

Posted at November 17,2006 1:50 AM
Tag：[CSS, Hack]

「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

になるでしょう。

以上です。
訳が間違ってましたらご指摘ください。適宜差し替えます。

Posted by yujiro このページの先頭に戻る

関連記事をもっと読む

トラックバックURL

このエントリーのトラックバックURL:

トラックバック

≫ IE 7 のCSSハック from [ VERSION510 ]
各ブラウザのCSSの解釈の違い（バグ）を補正するために、そのCSSのバグを逆手にとって、特定のブラウザに意図したデザインを表示させる裏技(?)... [続きを読む]

Tracked on November 17, 2006 3:31 AM

≫ IE7のCSSハック from こっから
とうとう、IE7が表示確認のために必要になりました。でも、IE6も同じく表示確認が必要でしょ。ということで、両方インストールできる方法を探しました。 ... [続きを読む]

Tracked on November 28, 2006 9:01 PM

≫ IE7用CSSハック from i need the sun
Movable Typeカスタマイズ中ですが、IE7とFirefoxで表示の違い... [続きを読む]

Tracked on December 24, 2006 3:41 PM

≫ IE7をインストールしてみた from サラリーマン白書
先日、自宅のノートPCにWindows Internet Explorer 7（以下IE7）を遅ればせながらインストールしてみました。なかなか進まない... [続きを読む]

Tracked on April 16, 2007 1:52 PM

≫ CSSを使ってHPを作った仕事のまとめ備忘録 from ミヤカワ日記
複数のCSSを外部ファイルにする場合、import.cssを作ろう import.css内には読み込む外部cssファイルをまとめておくべし。新規でC... [続きを読む]

Tracked on July 21, 2007 2:32 PM

≫ バグを逆手にプログラミング（CSSハック） from 地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記
livedoor ニュース - 【トレビアンGAME】初代『FF』の飛空艇はファミコンの限界を越えていた！　その飛空艇のスピード、実はファミコンの性能... [続きを読む]

Tracked on October 12, 2007 12:31 PM

≫ CSSハックまとめ from Mario Design
CSSハックで知ってるものをまとめておきます。名称があったりなかったり、知らないだけかもしれませんが～ [続きを読む]

Tracked on November 9, 2007 7:04 PM

≫ WordPressバージョンアップとIE用CSSハック from
昨夜、WordPressをバージョン2.3.3にアップデートしました。 WordPress2.5がもうリリースされる予定だったので、WP2.3.3にバージ... [続きを読む]

Tracked on March 14, 2008 1:40 PM

≫ CSSハックまとめてみました from CSS Lecture
ハックって使う機会はそんなに無いと思いますけど、もしもの時に! てな感じで知って... [続きを読む]

Tracked on May 27, 2008 12:38 PM

≫ IE7のみのIEハック from ウェブデザ
IE7のみのIEハックを紹介する。 [続きを読む]

Tracked on July 11, 2008 5:54 PM

こんにちは。
たびたびカスタマイズの参考にさせてもらっています。
実は私のブログもIE7で見ると表示がかなり違っている状態です。
こちらで紹介されていたCSSハックを利用して改善を試みようとしたのですが、
どの項目で症状が起きているのか特定できず、ほとほと困り果てています。

具体的に言いますと、記事の表示は問題ないのですが、
サイドバーの枠が全て消えてしまっている状況です。（個別の枠がなくなってしまっている）
また、カテゴリや過去ログはタイトル一覧で表示させるようにしているのですが、
IE７で見ると、文字の位置が崩れてしまっています。
また、サイドバーのリンクと記事につけているタグだけはリンク下線をつけないようにしているのですが、それが無効になってしまいます。（下線がついてしまう）

ブログはSeeSaaで、CSSはカスタマイズしていますが、
IE7のパソコンからデフォルトのCSSをプレビューさせると
サイドバーの枠が消えることなくきちんと表示されるので、
カスタマイズしたどこかに問題があると思われますが、それを特定することが出来ずにいます。
デフォルトのCSSはSeeSaa規定のものではなく、
テンプレートを配布しているサイトからいただいたものを使用していて、
そこに文字の大きさや余白などのカスタムを加えています。
普段は、ＯＳはＸＰ、ブラウザはIE6で作成しております。
あまり知識はなく専門的な言葉などは分からないのですが、
お知恵を貸していただけませんでしょうか？？

[1] Posted by nekomi : February 5, 2009 1:43 PM

＞nekomiさん
こんにちは。
ご質問の件ですが、スタイルシートの #links-left でカッコの閉じ忘れがあります。これを修正すれば正常に表示されると思います。

…前略…
/*左メニュー全体*/
#links-left {
font-weight:normal;
width:200px;
float:left;
margin: 10px 0px 0px 15px !important;
margin: 10px 0px 0px 4px;
text-align:left;
 　　　　　　　　　　　　　←ここ
#links {
}
…後略…

CSSの文法ミスでレイアウトが崩れるケースが少なくありませんので、同じ事象が発生したら下記のサイトでチェックしてください（修正する前に一度現状のサイトをチェックしてみてください）。
http://jigsaw.w3.org/css-validator/

また、コメント以外での全角スペース文字の記述も許容していませんので、下記の部分も併せて修正してください（プロパティとコメントの間に全角スペースがあります）。

…前略…
#banner{
font-family:arial, Helvetica; /* 書体の指定 */
text-align:right;　/* 文字の表示位置 */
margin:0px;　/* 外側の余白 上 右 下 左 */
height:180px;　/* 高さの指定 */
background-color: #FFFFFF;　/* 背景色 */
background-image:url(http://shima.up.seesaa.net/image/tyyuoo.JPG);　/* タイトル背景画像指定 */
background-repeat:no-repeat;　/* 背景画像の繰り返し */
}
…後略…

それではよろしくお願い致します。

[2] Posted by yujiro

: February 6, 2009 12:24 PM

お返事ありがとうございます。
うぅ・・・、
ここ数日、スタイルシートを上から下までくまなく何度も何度も見直しては
どこがいけないのか調べていたのですが、
こんな初歩的なミスに気づかなかったなんて・・・、
お恥ずかしい限りです。
教えてくださったサイトでも自分のミスを確認いたしました。
本当にありがとうございます。
yujiroさんのブログはとにかくたくさんの情報が詰め込まれてるので、
とても分かりやすく理解しやすく感じます。
これからもぜひ参考にさせてください。

[3] Posted by nekomi : February 6, 2009 2:02 PM

コメントする

greeting

名前（N）: *必須

メールアドレス（M）: *必須（非表示）

URL（U）:

情報を保存する？

ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

コメント（C）:

[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「<」、「>」は「>」と入力してください。例えば「<$MTBlogURL$>」は「<$MTBlogURL$>」となります（全て半角文字）

Now loading...