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

個別記事

前後の記事

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

この記事が属するカテゴリー: CSS

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

バージョン 6 以下の IE
IE7
それ以外のモダンブラウザ（Safari、Opera、Firefox）

ブラウザごとのハック

全てのサンプルは 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"]{...}} って感じで上書きさせれば大丈夫。

2006-06-11T00:07:58+09:00 | コメント (9) | トラックバック (17) |

トラックバック

このエントリーのトラックバックURL:: http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/383

このリストは、次のエントリーを参照しています: IE7 を含むモダンブラウザ向けの CSS ハックまとめ:

WEBデザインに優れたサイトのリンク集 ≪ DesignLinkDatabase | デザインリンクデータベース ≫ さんからのトラックバック: つらつらと; なんとなく気になったことを書き留めていたら、けっこうたまってしまった … 。カテゴライズしても、それぞれ何の脈絡もないので、今回は適当に書いておきます... [続きを読む]; 2006年06月14日 00:39

Blog --- WEBデザインのリンク集 : ikesai.com さんからのトラックバック: IE7のCSS HACK; シンプルなIE7のハックをみつけたのでバージョン 6 以下の IE にのみ適用... [続きを読む]; 2006年06月19日 20:07

KOMOREBI || blog さんからのトラックバック: IE7 のCSSハックはこれ; デイビッドハモンド(David Hammond)氏のブログで、早速IE7とそれ以... [続きを読む]; 2006年06月22日 11:00

Waviaei さんからのトラックバック: IE７はDoubled Float-Margin Bugが修正されているのとIEハック; 今回の新しいデザインを作成した際に、IE固有のバグ「IE Doubled Float-Margin Bugに悩まされました。このバグは、floatすると... [続きを読む]; 2006年07月02日 19:18

KAZUMiX memo さんからのトラックバック: [PC]IE7用CSSハックを用いる上での注意点（特にはてなダイアリーにおいて）; IE7 Betaはすごい勢いでシェアを伸ばしているようである。オレが愛用しているOpera 9を抜き去るのも時間の問題と言う勢いだ。*1そんなわけでいつ... [続きを読む]; 2006年08月11日 03:01

F+R (FplusR) さんからのトラックバック: IE7のCSSバグとOpera CSS Hack; 少し時間があったので、Windows Internet Explorer 7の... [続きを読む]; 2006年08月20日 00:32

Memo さんからのトラックバック: IE7; InterenetExplore7が今月にもリリースとなりました。ITmediaでリリースについて紹介されてます（記事）。さてさて、で一体どうなのでし... [続きを読む]; 2006年10月15日 21:24

Blog --- WEBデザインのリンク集 : ikesai.com さんからのトラックバック: IE7のCSS HACK; シンプルなIE7のハックをみつけたのでバージョン 6 以下の IE にのみ適用... [続きを読む]; 2006年11月02日 11:41

altstack weblog さんからのトラックバック: IE7への専用CSS適用方法覚書; 日本語版IE７のアクセスもちらほらと出てきたので、見てみぬフリをしてられなくな... [続きを読む]; 2006年11月05日 01:47

[ VERSION510 ] さんからのトラックバック: IE 7 のCSSハック; 各ブラウザのCSSの解釈の違い（バグ）を補正するために、そのCSSのバグを逆手にとって、特定のブラウザに意図したデザインを表示させる裏技(?)... [続きを読む]; 2006年11月05日 02:48

HRKD.net v1.0 さんからのトラックバック: CSS HACK自分用メモ。; 数多くのサイトでCSSHACKが紹介されているので、自分なりによく使うもののメモを。 IE6のみに適用〜 _div#css{width:200px;} ... [続きを読む]; 2006年12月13日 23:05

Web & Design Creation notes+++ さんからのトラックバック: [CSS]アンダースコアハックがMacIE(OS9.2)に適用されてしまう; MacIEのチェックは MacOS9.2 + IE5.1 MacOS10.3.9 + IE5.2 をチェックしていますが、前者で意図しない表示になっちゃ... [続きを読む]; 2007年01月05日 21:17

そらいろ日記さんからのトラックバック: [PS3][Web]CSSハック with PS3(未解決); CSSをJavaScriptを使わずにブラウザ毎のCSS実装のバグを利用して切り替えるという裏技。初めに言っておきますが、今回は未解決。結局はJava... [続きを読む]; 2007年02月18日 03:40

サラリーマン白書さんからのトラックバック: IE7をインストールしてみた; 先日、自宅のノートPCにWindows Internet Explorer 7（以下IE7）を遅ればせながらインストールしてみました。なかなか進まない... [続きを読む]; 2007年04月16日 13:50

Eblog さんからのトラックバック: IE7を対象としたハック; IE7を対象としたハック。IE7を含むか含まないかでCSSを振り分けたいときに便利。 [続きを読む]; 2007年05月22日 14:16

メモログさんからのトラックバック: IE7対応しているかどうかを確認するための3つのポイント; 既存のウェブサイトのCSSについて、IE7対応しているかどうかを確認するための... [続きを読む]; 2007年07月23日 22:01

Fledgling Blog さんからのトラックバック: CSSハック; CSSハックはまだ勉強していなかったので、代表的なものだけでも覚えておこうと思いました。 IE7 を含むモダンブラウザ向けの CSS ハックまとめ（Luc... [続きを読む]; 2007年09月07日 16:40

ななしさんからのコメント: html > body
これはハックとは言わないのでは?; 2006年06月11日 14:29

通りすがりさんからのコメント: ＞ななしさん
「CSSハックまとめ」と書いてあるでしょう。
その上で「ブラウザごとの振り分け」がテーマですよね。
流れを読んだほうがよいのでは。; 2006年06月11日 22:53

bzbell さんからのコメント

こんにちわ^^

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

では。。。

2006年06月12日 09:36

e-luck さんからのコメント

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

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

2006年06月13日 00:11

名無しさんからのコメント: それを上書きとは言いませんよ。; 2006年06月13日 16:24

uro さんからのコメント: 今更ですが、
*+html body
は、IE5やIE4にも適用されるので、
IE7だけのハックとしては利用価値は低いかもですね。; 2007年02月05日 18:42

e-luck さんからのコメント: そうなんですよねぇ。
この記事の内容も古くなってて、今は :first-child 疑似クラスを使って、*:first-child+html {} という形みたいですね。
記事を更新しなきゃなとは思ってるんですが…。; 2007年02月05日 22:06

ＴＭさんからのコメント

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

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

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

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

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

2008年02月24日 18:18

e-luck さんからのコメント: 文字間隔と改行に相関関係はないはずなので、他の指定が影響していそうな感じです。
p要素に対するスタイルを外すと直るということであれば、その辺りの何かの指定が影響しているのでしょう。
いずれにしろ、判断材料が足りないのでなんともお答えできません。; 2008年02月24日 22:55

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を < 、> を > とそれぞれ置き換えてください。

Lucky bag::blog