最近は少なくなったけど、Web屋をやってるとやっぱりIEに泣かされます↓
最新のブラウザでキレイにコーディングしてもIE6とか7で表示ズレ…
IEにあわせてコーディングしてみたら他のブラウザで表示ズレ…
んーラチがアカン…。
そんなときはハックでしょ。ということで今回は少ない&かなりメジャー？？ながらも強力な(自分的に)CSSハックをご紹介します。私の場合ズレるのはIE6、IE7なのでそちらをメインに紹介します、でも使わないに越したことはないのでほどほどにどうぞ。
ブラウザごとのCSSハック
■IE6用
[html]
.sample{
_color : red ;
}
[/html]
先頭にアンダーバーをつける。
この場合IE6だけredになります。
■IE7用
[html]
*:first-child+html .sample{
color : red ;
}
[/html]
ちょっと長いけど、先頭に*:first-child+htmlをつける。
この場合IE7だけredになります。
■IE6、IE7用
[html]
.sample{
*color : red ;
}
[/html]
先頭にアスタリスクをつける。
この場合IE6とIE7だけredになります。
■Firefox用
[html]
@-moz-document url-prefix( ){
.sample{
color : red ;
}
}
[/html]
@-moz-document url-prefix( ){ここにCSSを記述}で囲む。
これでfirefoxだけredになります。
これだけでも、かなり解決できちゃうのですが…。
もうほんとどうしようもないって時には以下で。
IE6、IE７専用のCSSを読み込ませる。
■IE6用 [html] <!--[if IE 6 ]> <link rel="stylesheet" type="text/css" href="ieonly_ie6.css" /> <![endif]--> [/html] ieonly_ie6.cssにIE6だけに読ませるCSSを記述。
■IE7用 [html] <!--[if IE 7 ]> <link rel="stylesheet" type="text/css" href="ieonly_ie7.css" /> <![endif]--> [/html]
ieonly_ie7.cssにIE7だけに読ませるCSSを記述。
※CSSは上から読み込まれるので読み込ませるCSSの一番下に記述してね。
その他、困った時に助かったヤツ。
■IE6で、ボーダーが表示されない [html]position:relative;[/html] ボーダーが表示されない要素に記述。
■IE6で、フロートさせた要素のマージンが倍になる [html]display: inline;[/html] フロートさせた要素に記述。
■IE6で、小さい高さにしたとき、なんでか大きくなってしまう [html]overflow: hidden;[/html] 小さい高さにした要素に記述。
■IE9で、jQueryが動かないって言われたとき試してみる価値あり。 [html]<meta http-equiv="X-UA-Compatible" content="IE=7">[/html] をhead内に記述すると動くかも、強制的に互換モードにしてくれる。
■CSSとかJSとかの更新時、キャッシュを読ませない方法 [html]<link rel="stylesheet" type="text/css" href="css/sample.css" />[/html] を上書きするとキャッシュを読んでしまうので [html]<link rel="stylesheet" type="text/css" href="css/sample.css?20130306">[/html] 末尾に「?日付」を追加するとキャッシュされない。んーこれは便利！
他にもたくさんあるけど、よく引っかかるのはこんな感じ。
皆さんのお役に立てば幸いです。
- 作者: 赤間公太郎,原一宣。,藤川麻夕子,山本和泉
- 出版社/メーカー: エムディエヌコーポレーション
- 発売日: 2015/07/17
- メディア: 単行本
- この商品を含むブログを見る
