小粋空間: IE7 の CSS ハック

Top ＞ CSS ＞ IE7 の CSS ハック

News

各種ブログテンプレート

2006年11月17日

エントリー本文

IE7 の CSS ハック

Posted at November 17,2006 1:50 AM
Category：[CSS]
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 ReTweet This!

« Counter プラグイン | Main | 234万5678アクセス特別企画 »

この記事を読んだ人はこんな記事も読んでいます

人気エントリー

Hatena Hot Entries

Hatena Entries

トラックバックURL

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

このブログは重複トラックバック防止プラグインにより、同一エントリーに対する同一のトラックバックは登録されないようにしています（記事のタイトルまたは記事の概要が異なる場合は登録されます）。

こんにちは。
たびたびカスタマイズの参考にさせてもらっています。
実は私のブログも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$>」となります（全て半角文字）