IE7 を含むモダンブラウザ向けの CSS ハックまとめ

Internet Explorer 7 は、 8 月にも beta3 がリリースされるかも知れないんだけど、今現在、IE7 beta2 を含むモダンブラウザに有効そうだと思われる CSS ハックを自分用にまとめておく。以前に IE 7 用の CSS ハックを紹介したことがあったけど、今回の Easy CSS hacks for IE7 - Nano See, Nano Do で紹介されていたハックは、比較的シンプルかも知れない。想定ブラウザは下記のとおり。

ブラウザごとのハック

全てのサンプルは body 要素を指定の対象としている。

バージョン 6 以下の IE にのみ適用
* html body
サンプルページ
バージョン 7 の IE にのみ適用
*+html body
サンプルページ
バージョン 7 を含む全ての IE にのみ適用
*+html body, * html body
サンプルページ
IE7 を含むモダンブラウザにのみ適用(バージョン 6 以下の IE を除外)
html>body
サンプルページ
IE7 を除くモダンブラウザにのみ適用
html>/**/body
サンプルページ

ちなみに、上記 IE7 向けのハックは、あくまで beta2 でのものなんで、正式版では使えなくなっている可能性もある。分からないけど。

その他、ブラウザ振り分けに使えそうなハック

対象要素に属性があれば、属性セレクタを使ったハックなんかも使える。例えば、下記のような要素を対象としてみる。

<p class="foo" id="bar">...</p>

IE6 以下を弾きたければ、CSS3 の属性セレクタを使って p[id$="bar"]{...} とすれば良いかもしれない。さらに IE7 も弾きたければ、否定擬似クラスを使って p[id$="bar"]:not([class="hoge"]){...} とか。ただ、これだと Opera9 も弾かれちゃうんで、CSS3 の Media Queries 使って @media screen and (min-width: 0) {p[id$="bar"]{...}} って感じで上書きさせれば大丈夫。

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: http://www.lucky-bag.com/mt/mt-tb.cgi/28

WEBデザインに優れたサイトのリンク集 ≪ DesignLinkDatabase | デザインリンクデータベース ≫ - つらつらと (2006年6月14日 00:39)

なんとなく気になったことを書き留めていたら、けっこうたまってしまった … 。 カテゴライズしても、それぞれ何の脈絡もないので、今回は適当に書いておきます... 続きを読む

Blog --- WEBデザインのリンク集 : ikesai.com - IE7のCSS HACK (2006年6月19日 20:07)

シンプルなIE7のハックをみつけたので バージョン 6 以下の IE にのみ適用... 続きを読む

KOMOREBI || blog - IE7 のCSSハックはこれ (2006年6月22日 11:00)

デイビッドハモンド(David Hammond)氏のブログで、早速IE7とそれ以... 続きを読む

Waviaei - IE7はDoubled Float-Margin Bugが修正されているのとIEハック (2006年7月 2日 19:18)

今回の新しいデザインを作成した際に、IE固有のバグ「IE Doubled Float-Margin Bugに悩まされました。 このバグは、floatすると... 続きを読む

KAZUMiX memo - [PC]IE7用CSSハックを用いる上での注意点(特にはてなダイアリーにおいて) (2006年8月11日 03:01)

IE7 Betaはすごい勢いでシェアを伸ばしているようである。オレが愛用しているOpera 9を抜き去るのも時間の問題と言う勢いだ。*1そんなわけでいつ... 続きを読む

F+R (FplusR) - IE7のCSSバグとOpera CSS Hack (2006年8月20日 00:32)

少し時間があったので、Windows Internet Explorer 7の... 続きを読む

Memo - IE7 (2006年10月15日 21:24)

InterenetExplore7が今月にもリリースとなりました。ITmediaでリリースについて紹介されてます(記事)。さてさて、で一体どうなのでし... 続きを読む

Blog --- WEBデザインのリンク集 : ikesai.com - IE7のCSS HACK (2006年11月 2日 11:41)

シンプルなIE7のハックをみつけたので バージョン 6 以下の IE にのみ適用... 続きを読む

altstack weblog - IE7への専用CSS適用方法 覚書 (2006年11月 5日 01:47)

日本語版IE7のアクセスもちらほらと出てきたので、見てみぬフリをしてられなくな... 続きを読む

[ VERSION510 ] - IE 7 のCSSハック (2006年11月 5日 02:48)

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

HRKD.net v1.0 - CSS HACK自分用メモ。 (2006年12月13日 23:05)

数多くのサイトでCSSHACKが紹介されているので、自分なりによく使うもののメモを。 IE6のみに適用〜 _div#css{width:200px;} ... 続きを読む

Web & Design Creation notes+++ - [CSS]アンダースコアハックがMacIE(OS9.2)に適用されてしまう (2007年1月 5日 21:17)

MacIEのチェックは MacOS9.2 + IE5.1 MacOS10.3.9 + IE5.2 をチェックしていますが、前者で意図しない表示になっちゃ... 続きを読む

そらいろ日記 - [PS3][Web]CSSハック with PS3(未解決) (2007年2月18日 03:40)

CSSをJavaScriptを使わずにブラウザ毎のCSS実装のバグを利用して切り替えるという裏技。 初めに言っておきますが、今回は未解決。結局はJava... 続きを読む

サラリーマン白書 - IE7をインストールしてみた (2007年4月16日 13:50)

先日、自宅のノートPCにWindows Internet Explorer 7(以下IE7)を遅ればせながらインストールしてみました。 なかなか進まない... 続きを読む

Eblog - IE7を対象としたハック (2007年5月22日 14:16)

IE7を対象としたハック。IE7を含むか含まないかでCSSを振り分けたいときに便利。 続きを読む

メモログ - IE7対応しているかどうかを確認するための3つのポイント (2007年7月23日 22:01)

既存のウェブサイトのCSSについて、IE7対応しているかどうかを確認するための... 続きを読む

Fledgling Blog - CSSハック (2007年9月 7日 16:40)

CSSハックはまだ勉強していなかったので、代表的なものだけでも覚えておこうと思いました。 IE7 を含むモダンブラウザ向けの CSS ハックまとめ(Luc... 続きを読む

Comments

ななし said:

html > body
これはハックとは言わないのでは?

通りすがり said:

>ななしさん
「CSSハックまとめ」と書いてあるでしょう。
その上で「ブラウザごとの振り分け」がテーマですよね。
流れを読んだほうがよいのでは。

bzbell said:

こんにちわ^^

いつも拝見させてもらっています。
今回の CSSハック も、ためになる情報で助かります♪
各ブラウザに対応するのってムズかしいですね…(-.-;)はぁ

では。。。

e-luck said:

>これはハックとは言わないのでは?
まぁ、何を持って CSS ハックと定義するのかってのはあるとは思うんですが、ブラウザの実装の不備をついて、何がしかの指定を振り分けるって事は CSS ハックの内なんだろうという俺解釈な訳で、つまりは、通りすがり さんの仰る通りと言うことです。

>>bzbell さん
ありがとうございます :-)
確かに各ブラウザに対応させるのって面倒ですよね。
今回紹介したハックもいつまで利用できるのか微妙だと思うんで、使うのであれば、そこら辺のリスクを考えないとあとあと面倒な事になりそうです。

名無し said:

それを上書きとは言いませんよ。

uro said:

今更ですが、
*+html body
は、IE5やIE4にも適用されるので、
IE7だけのハックとしては利用価値は低いかもですね。

e-luck said:

そうなんですよねぇ。
この記事の内容も古くなってて、今は :first-child 疑似クラスを使って、*:first-child+html {} という形みたいですね。
記事を更新しなきゃなとは思ってるんですが…。

TM said:

こんにちは!ハックをまだ勉強したてで、わからないことばかりですが
頑張って勉強させてもらってます。

さて、見やすく文字間隔を広げようとp letter-spacing:1pt; font:MS UI Gothic;と指定し、文字間隔は広がったのですが、
改行がおかしくなりました。

Firefoxで見るとbr br で一行空きますが、IEで見ると行間があかず
brbrbr やっと一行あきますが、firefoxでは二行空きます。

スタイルのPをはずすと、普通にbrbrで両ブラウザとも一行改行
されます。

どんな風にハックをかければ、同じように1行改行になるのでしょうか?
ご教示頂ければ幸いです。

e-luck said:

文字間隔と改行に相関関係はないはずなので、他の指定が影響していそうな感じです。
p要素に対するスタイルを外すと直るということであれば、その辺りの何かの指定が影響しているのでしょう。
いずれにしろ、判断材料が足りないのでなんともお答えできません。