カテゴリー:CSSハック

表示タイプ
リスト表示へ
ボックス表示中

IE7を対象としたハック

2007年5月22日 14:13

今回はCSSハックのお話。
というのも、IEだけがどうしても言うことを聞いてくれず、
なんとかハックを使わずに処置したいなーと思って試行錯誤してたんだけど
どうやらそれもつらくなってきたのでしかたなくハックを使ってみた。
IE(7も含む)をはじきたいなーと思って調べてみたらわりとあっさり見つかりました。

ただ、実際自分で書いて置かないと忘れてしまうのでメモ兼エントリー。

ちなみにLucky bag::blogさんの記事を参考にしました。

今回参考にしたのは下の5つ。
1) IE6以下にのみ適用
* html body
2) IE7のみ適用
*+html body
3) IE7を含む全てのIEにのみ適用
*+html body, * html body
4) IE7を含むモダンブラウザにのみ適用(IE6以下を除外)
html>body
5) IE7を除くモダンブラウザにのみ適用
html>/**/body

IE7を含めるのかそうじゃないのか、でわりと振り分けの必要が出てくると思いますが、
とりあえずこれだけ覚えておけばIE対策としてはなんとかなるかもしれません。

Safari用 CSSハック

2007年1月11日 11:26

ということで、なんか案件でSafariだけ挙動がおかしい部分があり、
急ぎだったのでSafariだけに適用できるハックがないか探していたら見つけました。
内容はこんな感じ。

  1. /* safari only \*/
  2. html:\66irst-child div {
  3. margin: 0 0 0 18px;
  4. }

/* xxxx \*/でコメントアウトし、さらに「html:\66irst-child」を適用させたいCSSの前に追加することでSarariだけにCSSを読み込ませることができるみたいです。
\66が「f」に該当するんだろうか。
文字参照(だっけ?)でもCSSがちゃんと動くってことかな?

どんなブラウザでもクリアするワザ【最終版?】

2006年11月21日 11:53

クリアするウラワザで書いた、ひとつのボックスで完結するfloatクリアワザの、IE7対応版です。
内容としては、前回とほぼ同じ。
ただ、IE用に、IE独自拡張CSSの「zoom」プロパティを使うところ。

  1. div {
  2. zoom: 1;/*for IE 5.5-7*/
  3. }
  4. div:after {/*for modern browser*/
  5. content: ".";
  6. clear: both;
  7. display: block;
  8. height: 0;
  9. visibility: hidden;
  10. }

とすることでIE7でも大丈夫なようです。
細かい内容については、前回の記事を参照くださいw

ちなみにこちらのサイトが元ネタです。
STOP'N LISTEN

スターハック

2006年7月10日 10:50

IE4〜6、MacIE4〜5にCSSを適用するハックです。
色々組み合わせることで個別にスタイルを分けることも可能です。

スター7・ハック

2006年7月 7日 16:33

NescapgeやIEにだけCSSを読み込ませたい場合に使えます。
ただし、これはバグを利用した技です。
また、今後のIEではこれを読み込まなくなる可能性もあります。

ホーリー・ハック

2006年7月 7日 16:31

Mac IEを"はじく"CSSハックです。
このハック内のCSSプロパティは、Mac IEには読み込まれません。
簡単に言うと、コメントのバグを利用したハックです。