素材の壺

実用的なCSSハック一覧〜CSS

実用的なCSSハック一覧〜CSS

【概要】
IEでは表示されるのにFirefoxだとレイアウトが崩れてしまう等、ブラウザごとに起こる表示の問題を解決!使えそうなCSSハック一覧


【スターハック】
セレクタの前に「*html」と書くことでWin IE4〜6、mac IE4〜5のみ適用される。
※ただしCSSの書式としては、正しい書き方ではない。


[例]
*html div{ width: 100%;}

【Hollyハック】
コメントを「/*\*/」という書式で書く事でmac IE5のみを排除できる。「/* */」と空のコメントを挿入する事でその後のスタイルは適用されるようになる。


[例]
div{ /*\*/width: 100%;/* */}

【:root擬似クラスを利用したハック】
セレクタの前に「:root」をつけると、:root擬似クラスをサポートしているブラウザ(Firefox、Mac IE5、Safari)で適用される。
※:root擬似クラスはCSS3で導入予定のもので、CSS2では定義されていません。


[例]
:root div{ width: 100%;}

【ハッシュハック】
プロパティの先頭に「#」をつける事でWin IE4〜6、mac IE5、Opera 7、Firefoxなどでスタイルが適用される。
※ただしCSSの書式としては、正しい書き方ではない。


[例]
div{ #width: 100%;}

【アンダースコアハック】
プロパティの先頭に「_」をつける事でWin IE4〜6のみスタイルが適用される。
※ただしCSSの書式としては、正しい書き方ではない。


[例]
div{ _width: 100%;}

【Caioハック】
コメントを「/*/*/」という書式で書く事でNetscape4のみを排除できる。「/* */」と空のコメントを挿入する事でその後のスタイルは適用されるようになる。


[例]
div{ /*/*/width: 100%;/* */}

コメント(1)

いままでずっとブラウザに悩まされてきましたが。。。
ハック良いですね!

コメントする

名前
電子メール
URL
コメント
サイト内検索
TOP利用規約リンクについてお問い合わせ│相互リンク[ 素材1 ][ 素材2 ][ 素材3 ][ HP制作 ]│
無料アフィリエイトツール「アフィーノ」