エントリー本文
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になるでしょう。
以上です。
訳が間違ってましたらご指摘ください。適宜差し替えます。
≫ 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をバージョン2.3.3にアップデートしました。
WordPress2.5がもうリリースされる予定だったので、WP2.3.3にバージ... [続きを読む]
≫ CSSハックまとめてみました from CSS Lecture
ハックって使う機会はそんなに無いと思いますけど、もしもの時に! てな感じで知って... [続きを読む]
≫ IE7のみのIEハック from ウェブデザ
IE7のみのIEハックを紹介する。 [続きを読む]
こんにちは。
たびたびカスタマイズの参考にさせてもらっています。
実は私のブログもIE7で見ると表示がかなり違っている状態です。
こちらで紹介されていたCSSハックを利用して改善を試みようとしたのですが、
どの項目で症状が起きているのか特定できず、ほとほと困り果てています。
具体的に言いますと、記事の表示は問題ないのですが、
サイドバーの枠が全て消えてしまっている状況です。（個別の枠がなくなってしまっている）
また、カテゴリや過去ログはタイトル一覧で表示させるようにしているのですが、
IE７で見ると、文字の位置が崩れてしまっています。
また、サイドバーのリンクと記事につけているタグだけはリンク下線をつけないようにしているのですが、それが無効になってしまいます。（下線がついてしまう）
ブログはSeeSaaで、CSSはカスタマイズしていますが、
IE7のパソコンからデフォルトのCSSをプレビューさせると
サイドバーの枠が消えることなくきちんと表示されるので、
カスタマイズしたどこかに問題があると思われますが、それを特定することが出来ずにいます。
デフォルトのCSSはSeeSaa規定のものではなく、
テンプレートを配布しているサイトからいただいたものを使用していて、
そこに文字の大きさや余白などのカスタムを加えています。
普段は、ＯＳはＸＰ、ブラウザはIE6で作成しております。
あまり知識はなく専門的な言葉などは分からないのですが、
お知恵を貸していただけませんでしょうか？？
＞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; /* 背景画像の繰り返し */
}
…後略…それではよろしくお願い致します。
: February 6, 2009 12:24 PM
