CSS3をInternet Explorer5.5から8でも使用できるようにする
久々のサイト作りで、当方のMacでは綺麗な組みもIE7以下では、崩れてしまっていたのが発覚。。。(泣)
どうすればいいんでしょう。。。?ああ、古いIEなんてもう捨ててしまいたい。
IEがらみで、便利そうなのでメモっとく。
CSS3をInternet Explorer9以前のバージョン(IE5.5〜8)でも扱えるようにする方法
●Javascriptライブラリで提供されているIE9.jsを読み込む。
<!--[if lte IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]-->
擬似クラスの対応
属性セレクタの対応
透過PNGの対応
position fixedの対応
margin autoの対応(margin: 0 auto;でコンテンツを中央揃え)
max-heightやmin-heightの対応
その他バグ修正 など
HTML5の新要素にInternet Explorer8以前も対応させる
●html5.jsを読み込ませる
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
section・・・汎用的セクションを表す
article・・・独立して配信可能な情報を表す
header・・・セクションのヘッダーを表す
footer・・・セクションのフッターを表す
aside・・・補助的な情報を表す
nav・・・主要なナビゲーションを表す
hgroup・・・h1〜h6の見出し要素をまとめる
figure・・・文章中の図を表す
透過PNGのデータを背景画像に配置したとき、IE6で表示させる方法
以前も書いた気がするけど、まとめておきます。
DD_belatedPNG
このminiの方をダウンロード
<!--[if IE 6]> /* IE6にのみスクリプトを実行するという宣言 */ <script src="js/DD_belatedPNG_0.0.8a-min.js" type="text/javascript"></script> /* jsファイルの場所を記述 */ <script> DD_belatedPNG.fix('img, .png_bg'); /* 'img, .png_bg' の部分にスクリプトを反映させる要素名、id名、クラス名を記述 */ </script> <![endif]--> /* IE6にのみスクリプトを実行するという宣言 */