IE7向けハック
昨日コーディングをしていて、どうしてもIE7だけいう事を聞いてくれない箇所があったので、IE7のみに適応させるハックを探してみた。 普通の箇所は「＞」を使ったハックでFirefoxやらNNやらと一緒の指定でいう事を聞いてくれるのだが･･･ううむ。面倒な奴だ。
ということで、参考にしたサイトはここ。
CSS Hacks
<!--[if IE]>を使って別cssを割り当てようかとも思っていたのだが、なんかそんなに大した部分でもなかったので、同一cssファイル内で処理できる記述を参考にした。
Easy selectorsの部分で紹介されてた内容（引用）
IE 6 and below
* html {}
IE 7 and below
*:first-child+html {} * html {}
IE 7 only
*:first-child+html {}
IE 7 and modern browsers only
html>body {}
Modern browsers only (not IE 7)
html>/**/body {}
Recent Opera versions 9 and below
html:first-child {}
つーことで、「*:first-child+html {}」を使用してみると、他ブラウザに影響なく意図するレンタリングにできた。
しかしながら、今回まず普通にIE6向けの指定、FF達向けに「＞」を使用したハック、それをIE7向けに「*:first-child+html {}」でオーバーライド。ってなんだかソースが多くなってちと『正解』とは言えないかもしれないなぁ、とか思ったりもするのだが。
IE7のハックに関してはLucky bag::blogさんでもいろいろ紹介されていた。
Lucky bag::blog: IE 7 用の CSS ハック
Lucky bag::blog: IE7 を含むモダンブラウザ向けの CSS ハックまとめ
あぁ、こちらのサイトではIE7onlyに対して「*+html body」が使われてるのか。なるなる。こっちの方が書き方がシンプルだったな･･･失敗した。。。
個人的には<!--[if IE]>は多分使わないので（単にcssファイルを増やしたくないだけ）、css内で振り分けられるハックは貴重な存在。でもやっぱりハックはハック。使わないにこしたことはない。
<< CSSだけのリンク集 | 印刷用cssのリンクを属性セレクタで活用する >>
トラックバック
このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/79
コメント (2)
IE7用ハック、メモさせていただきました。
ところで、同じマシンでのIE6とIE7の同居、その後うまくいってます？
なんか私の周りにはインストールでつまずいたり、同居に失敗した人があまりに多いのですよ。
投稿者: corns | 2006年12月19日 11:45
>cornsさん、こんにちわ。
うーん。今のところ検証用としては問題ないっす。ただ、DWでプレビュー用ブラウザとして登録してても、IE6が立ち上がってる状態では挙動がおかしいので、別途IE7を立ち上げておいてからFF、IE6、IE7なんかを切り替えてF5でその都度プレビューを更新確認したりとか、なんかやりやすい方法を自分で見つけていかなきゃならん感じです。
環境によってもだいぶ違うみたいだけど･･･。あとIE7のstandalone版立ち上げた瞬間は画面が真っ青で何も表示されない感じ。css切ったら中身も見えるんですが･･･。その変を不審に思わず使うかどうか、な気がします（汗）
投稿者: Red | 2006年12月19日 14:35