子セレクタ「>」を利用したハック
IEが子セレクタに対応していないというのを利用したテクニックです。 一番最初に覚えるべきハックとも言えるほど、便利なハック。 やり方 div#g_navi ul { margin-left:-5px; width:600px; } /*IE以外に...*/ div#g_navi > ul { margin-left:0; } ↑こんな感じで、IE用の値を書いた後に、IE以外用の値を子セレクタを使って書きます。 上記のサンプルでは、「floatで左右どちらかに寄せているボックスに、marginの値を指定するとIE5.x/IE6の環境下で、指定値の2倍程度のmarginが設定される。」バグ対策として使ってます。 アンダースコアハックと逆ですが、アンダースコアハックはCSSの書式的にはダメなので、W3C CSS ValidatorでErrorになります。 子セレクタは、IE6が対応してないってい
最近のブラウザで使えそうなCSSハック
使う機会は滅多に無いんだけど、知識として知ってないと困ったりしたので、取りあえず現在主流だろうブラウザのハックを自分のまとめ用に。 実際の状況を確認出来るように、デモページもご用意しました。 必要あるか分かりませんがダウンロードも出来るようにしときました。 拡張子がshtmlとかなってるので、htmlにして下さい。 ハックのデモページ デモページのファイル一式ダウンロード(zip:14kb) 主要っぽいハック Win IE6までのハック（アンダースコアハック） .hackTest01 { _background: red; } Win,Mac IE6までのハック（スターハック） * html .hackTest02 { background: red; } Win IE7用のハック *:first-child + html .hackTest03 { background: red; }
clearfixハック｜CSS HappyLife
通常、floatさせている画像やボックスなどがある場合何らかの形でclearするか、その親要素にfloatを指定しないと、親要素からはみ出してしまいます。 コレはCSS2.0の仕様なんで正しい表示なんですが、どうしても親要素にfloatなどが使えず、やむなくclear:bothをbrなりdivにクラス指定して解決してたりって事があったかと思います。 IEの場合はwidth、もしくはheightを指定する事で解決できますが、コレはバグなんで他のモダンブラウザでは解決できません。 ソコでかなり便利に使えるテクニックが、clearfix。 使い方は、clearしたい親要素に下記のように記述。 div:after { content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-hei
W3G - World Wide Web Guide
W3G について 当サイトは、初学者を対象とする World Wide Web（ワールド・ワイド・ウェブ）における情報技術の解説サイトです。ウェブサイトの作り方などの基本・基礎から応用のウェブサイトの品質を高める方法など SEO対策（検索エンジン最適化・ウェブページ最適化）と Web標準（Web Standards）にフォーカスしたウェブサイトの作成情報を中心に扱っています。ただし、作者の知識が偏っているため扱っている内容も偏っています。 免責事項 w3g.jp 配下で公開しているリソースは、その正確性に万全を期すよう努力しておりますが、その内容の正確性、有用性、安全性等については、いかなる保証を行うものでもありません。また、当サイトの利用者が掲載情報に基づいて下した判断および起こした行動により、いかなる結果が発生した場合においても、作者（上田 遼）はその責を負いませんのであらかじめご了承
CSS ハックまとめ Lucky bag::blog: IE7 を含むモダンブラウザ向け
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 サンプ
アスタリスクをプロパティ名の頭につけるというCSSハック
CSSの各セレクタのブロック内でInternet ExplorerとFirefoxやOperaなどで分けてプロパティを設定するハックとしてUnderscore Hackという有名なものがあるが、Details on our CSS changes for IE7によるとInternet Explorer 7では修正されている。だが、アンダースコアのかわりにアスタリスク(*)をプロパティ名の頭につけるというAsterisk Hack (勝手に命名)は健在だったりとか。 Asterisk HackはUnderscore Hackとほとんど同じで、 #menu { position: fixed; *position: absolute; } というような記述をするハック(サンプル・ページ)。結果はInternet Explorerでabsolute、FirefoxやOperaなどではfixed
Hollyハックに頼らないMACIE用CSSハック: CodeWeb
ここは他所様と比べると、やってる事のレベルがと～っても低い上に説明も分かりにくく誤字脱字の多い所です。 そういう仕様なのでエラーとか出ても知りません。 さっき書いた記事だけだとあんまり意味がないので、Hollyハックに頼らないでMACIEに対してCSSハックする方法を考えてみました。 とっても単純な内容です。 任意のブラウザのみ適用(color:黒→赤を適用) * html p { color: #F00; _color: #000; } 任意のブラウザ以外排除（color:黒→赤を適用） p{ color: #F00; } * html p { color: #000; _color: #F00; } スターハックでIE専用スタイルを適用したあとアンダースコアハックを使ってWINIE用スタイルを打ち消してるだけです。 しょぼくてすいません。 複合技を使わなくともで問題なく動作することを確
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Most used CSS tricks | StylizedWeb.com