IE8でCSSが適用されないサイトがあり調査しました。
原因が文字コードでした。
utf8の記述が厳密ではないと認識しないようです。
ダメな例@charset “utf8″;
↓
@charset “utf-8″;
floatを使った2段組で、右側が横幅固定で、左側が画面横幅の残りを可変でということをしたいとき、どうしたら実現できるのでしょう。
可変にしたいほうのカラムのwidthを100%とし、marginをマイナスのピクセルを指定することによってリキッドレイアウトを実現することができます。
例えば、上記例のような場合、左側の段に width を 100% とし、margin-right を -200px と float:left を指定します。
左側の段の width は 100% なので、右側と重ならないよう、左側の子要素たちに margin-right を 200px と指定します。
CSS記述例
<style type="text/css">
<!--
#container{ margin-left: 200px;}
#content {
float : right;
width: 100%;
margin-left: -200px;
}
#sidebar {
float: left;
width: 200px;
margin-left: -200px;
}
-->
</style>
HTML記述例 <div id="container"> <div id="content"> <h2>2 段組 レイアウトの例</h2> <p> 左側の内容をdivで囲み右マージンを右側の段の分だけ確保します。 </p> </div> <div id="sidebar"> <h2>2 段組 レイアウトの例</h2> <p> 左側の内容をdivで囲み右マージンを右側の段の分だけ確保します。 </p> </div> </div>
よく使うが忘れてしまうのでメモ。
ポイント
・高さ 100% の body 要素に position: relative; を指定する。
・ボックスの縦横を min-width、min-height を指定。あとは50% のところに配置してネガティブマージンでボックスの半分戻す。
<body>
<div class="contenier">
<p>中央寄せ</p>
</div>
</body>
html, body {height: 100%;} /*高さ100%に指定*/
body {
margin: 0;
padding: 0;
position: relative;
min-width: 600px; /*中央配置するボックスの横幅*/
min-height: 400px; /*中央配置するボックス縦幅*/
background-color: #2262aa;
}
.contenier {
margin: -200px 0 0 -300px; /*縦横の半分をネガティブマージンでずらす*/
position: absolute; /*body要素に対して絶対配置*/
top: 50%; /*上端を中央に*/
left: 50%; /*左端を中央に*/
width: 600px; /*横幅*/
height: 400px; /*縦幅*/
background-color: #fff;
}
Net Applicationsの報告によれば、2009年9月におけるブラウザシェアはIEが65.71%で過半数のシェアを確保している。バージョンごとにみるとIE6 24.42%、IE7 19.39%、IE8 16.84%となっており、IE6、IE7、IE8のシェアが拮抗しつつあることがわかる。これまでのシェア変動から推測すると、今後数ヶ月の間は3つのバージョンのIEが似たようなシェアを持った期間が続くことになる。IEが第一シェアだといっても、結果的に3つのバージョンに対応する必要がある。
この状況は、特にCSSのサポートという面で厄介な状況を生み出している。IE8はCSS 2.1への高い準拠を実現しているが、IE7はそうではない。IE6はサポートしている要素やプロパティがさらに少ない。またIE7やIE6は対象の要素やプロパティをサポートしていても、規約が想定している動作と違う動きをするものがある。
Louis Lazaris氏がSmashing MagazineにおいてCSS Differences in Internet Explorer 6, 7 and 8のタイトルのもとIE6、IE7、IE8で使えるCSSについてまとめている。すべてのバージョンでサポートされていないものは掲載からはずされている。IEのどのバージョンで使えるのか見やすく参考になる。紹介されている機能は次のとおり。
セレクタと継承
| 項目 | IE6 | IE7 | IE8 | 備考 |
|---|---|---|---|---|
| チャイルドセレクタ | × | ○ | ○ | IE7では親と子の間にHTMLコメントがある場合にはチャイルドセレクタは機能しない |
| チェインクラス | × | ○ | ○ | IE6は一見サポートしているように見えるがそうではない |
| 属性セレクタ | × | ○ | ○ | |
| 隣接セレクタ | × | ○ | ○ | IE7では隣接する要素の間にHTMLコメントがある場合にはチャイルドセレクタは機能しない |
| 間接セレクタ | × | ○ | ○ |
擬似クラスと擬似要素
| 項目 | IE6 | IE7 | IE8 | 備考 |
|---|---|---|---|---|
| :hover擬似クラスに続く子孫セレクタ | × | ○ | ○ | |
| チェイン擬似クラス | × | ○ | ○ | |
| 非アンカー要素の:hover擬似クラス | × | ○ | ○ | |
| :first-child擬似クラス | × | ○ | ○ | IE7ではHTML湖面度が最初の子要素の前にある場合には機能しない |
| :focus擬似クラス | × | × | ○ | |
| :before擬似クラスス | × | × | ○ | |
| :after擬似クラス | × | × | ○ |
プロパティ
| 項目 | IE6 | IE7 | IE8 | 備考 |
|---|---|---|---|---|
| ポジション指定からの仮想サイズ | × | ○ | ○ | 絶対ポジションにおけるtop、right、bottom、left指定でwidthoyおよびheightを提供 |
| min-height | × | ○ | ○ | |
| min-width | × | ○ | ○ | |
| max-height | × | ○ | ○ | |
| max-width | × | ○ | ○ | |
| borderの透過指定 | × | ○ | ○ | |
| positionの固定指定 | × | ○ | ○ | |
| background-attachmentの固定指定 | × | ○ | ○ | IE6は誤ったバックグラウンドセットを持った要素の割合指定に関連して想定していない背景画像の固定をおこなう。そのためroot要素いおいてのみ動作する |
| inherit | × | × | ○ | IE6とIE7ではdirectionとvisibilityに対してのみinheritが適用される |
| テーブルセルにおけるborder-spacing | × | × | ○ | |
| テーブルにおける空セルの表示するempty-cells | × | × | ○ | |
| テーブルキャプションの縦方向ポジションcaption-side | × | × | ○ | |
| クリッピングのエリア指定 | × | × | ○ | IE6とIE7ではカンマを使わない非推奨の記述をする場合には機能する |
| orphans | × | × | ○ | |
| widows | × | × | ○ | |
| page-break-inside | × | × | ○ | |
| outline | × | × | ○ | |
| displayにおけるblock, inline, none以外の指定 | × | × | ○ | |
| white-space | × | × | ○ |
その他のテクニック
| 項目 | IE6 | IE7 | IE8 | 備考 |
|---|---|---|---|---|
| @importに対するメディアタイプ | × | × | ○ | IE6とIE7でも@importは動作するがメディアタイプが指定されていると機能しない |
| カウンタ値 | × | × | ○ | counter-incrementおよびcontentプロパティ |
| クオート文字列の指定 | × | × | ○ |
IE8.js
IE5~7に実装されていないCSS3を対応させる。
ヘッダに書く↓
＜![if lt IE 8]>
＜script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js” type=”text/javascript”>
＜![endif]>
pngファイルはファイル名を「○○-trans.png」。
あとはIE6でこのpngは置換されるので、jsファイルと同ディレクトリにblank.gifを設置する。
ただ背景のrepeatには適用されない。
特に問題なく使用されている報告をみますが、私の使用した限りで発生した事象。
- ロードされた後に書き換えるため、IE6の挙動は遅い。
- cssファイルを外部ファイルで読み込むときの
でmedia=”all”を指定していると印刷アクションでエラーが発生します。
Netscape Navigator 4.xで読み込ませないというハックでmedia=”all”を使用してきましたが、いまさら気にすることもないのでmedia=”screen”を使用し、印刷用にはmedia=”print”で別対応することでエラーは回避できます。 - IE６で実装されていない子セレクタhoge > hoge子 が含まれているcssファイルをメインの外部css以外 import、link要素で読み込むとjsエラーが発生する。
ダウンロードはGoogleCodeより
http://code.google.com/p/ie7-js/
ie8