−CSSハック一覧−

indexに戻る XHTMLについて HTML5について スタイルシート CSS3 PIE Box Shadowエフェクト 角丸いろいろ ダウンロード

テーブル リスト フォーム1 フォーム2デザイン リンク イメージマップ ボーダー Flashタグ FaceBook設定

アイコンフォント アニメーション ボタンアニメ スクロールして固定 フキダシ onクリック タブ

display 画面固定・sticky［CSS］ パララックス［CSS］ フレキシブルボックス［CSS］ CSSハック一覧 CSS小技一覧 CSSサンプル雛形 CSSサンプル [table] CSSサンプル [form] CSSサンプル [flow]

Mozilla Firefoxのだけ適用させるハック

CSSだけで実現出来る。div要素内に以下のコードを追加するだけ（CSS内に）

@-moz-document url-prefix() { p { color: #f00; } }

Google ChromeとSafariにだけ適用させるハック

CSSだけで実現出来る。div要素内に以下のコードを追加するだけ（CSS内に）

@media screen and (-webkit-min-device-pixel-ratio:0) {
    #hoge {
        padding-top: 1px;
    }
}

ＩＥにだけ適用させるハック

CSSだけで実現出来る。div要素内に以下のコードを追加するだけ（CSS内に）

IE7に適用
値の先頭にアスタリスクを「 * 」を付与 
body{*color : green ; }

IE8に適用
値の末尾に「 \9 」を付与
body{color : blue\9 ;}

IE9に適用
セレクタの先頭に「 : root 」を付与、さらに値の末尾に「 \9 」を付与
root body {color : orange\9 ; }