【特集】正式版完全対応! Internet Explorer 7 CSS攻略法 (4) 02-03 新規対応/未対応機能の問題を回避する | クリエイティブ

急上昇ワード

[

]

【特集】

正式版完全対応! Internet Explorer 7 CSS攻略法

4 02-03 新規対応/未対応機能の問題を回避する

エ・ビスコム・テック・ラボ　 [2007/01/18]

印刷

先頭
前へ
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- ／18
次へ
最後

セレクタ

IE7では新規に多くのセレクタがサポートされたが、IE6以下では対応していないため、下位互換を考慮すると対応が必要となる。しかし、セレクタの機能を他のプロパティなどで置き換えるのは難しく、「新規に対応したセレクタや未対応のセレクタは使用しない」という形で対応するしかないのが現状だ。

border-spacing

border-spacingプロパティでは、テーブルの隣接するセルの罫線から罫線までの間隔を指定することができるが、IE7ではサポートされていない。


IE7での表示	Firefoxでの表示

サンプルソース: 2-3-1

table {border: solid 1px blue; border-spacing: 10px} th, td {border: solid 1px red}

<table> <tr><td>DATA</td><td>DATA</td><td>DATA</td><td>DATA</td><td>DATA</td></tr> <tr><td>DATA</td><td>DATA</td><td>DATA</td><td>DATA</td><td>DATA</td></tr> <tr><td>DATA</td><td>DATA</td><td>DATA</td><td>DATA</td><td>DATA</td></tr> <tr><td>DATA</td><td>DATA</td><td>DATA</td><td>DATA</td><td>DATA</td></tr> </table>

下位互換を考慮し、IE7でもセルの間隔を調整するためには、table要素のcellspacing属性を使用する方法がある。cellspacing属性はborder-spacingプロパティと同じ働きをし、HTML4.01、XHTML1.0、XHTML1.1で使用することが可能だ。


IE7での表示	Firefoxでの表示

サンプルソース: 2-3-2 sample02-03-02.html

table {border: solid 1px blue} th, td {border: solid 1px red}

<table cellspacing="10"> <tr><td>DATA</td><td>DATA</td><td>DATA</td><td>DATA</td><td>DATA</td></tr> <tr><td>DATA</td><td>DATA</td><td>DATA</td><td>DATA</td><td>DATA</td></tr> <tr><td>DATA</td><td>DATA</td><td>DATA</td><td>DATA</td><td>DATA</td></tr> <tr><td>DATA</td><td>DATA</td><td>DATA</td><td>DATA</td><td>DATA</td></tr> </table>

caption-side

caption-sideプロパティでは、テーブルのキャプションの表示位置を指定できるが、IE7ではサポートされていない。たとえば、caption-sideプロパティでキャプションの表示位置を下に指定しても以下のように表示される。

<caption>によるマークアップを前提とした場合、他のプロパティなどに置き換えるのは難しく、「caption-sideプロパティを使用しない」という形で対応するしかないのが現状だ。


IE7での表示	Firefoxでの表示

サンプルソース: 2-3-3 sample02-03-03.html

table {border: solid 2px blue} caption {caption-side: bottom}

<table> <caption>キャプション</caption> <tr> <td> 文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章 </td> </tr> </table>

empty-cells

empty-cellsプロパティでは、テーブルの空セルの罫線の表示を指定することができるが、IE7ではサポートされていない。たとえば、empty-cells:showと指定しても、IE7では罫線は表示されない。


IE7での表示	Firefoxでの表示

サンプルソース: 2-3-4 sample02-03-04.html

table {border: solid 2px blue} td {border: solid 2px red; padding: 10px; empty-cells: show}

<table> <tr><td>DATA</td><td>DATA</td><td>DATA</td></tr> <tr><td>DATA</td><td>DATA</td><td>DATA</td></tr> <tr><td>DATA</td><td>DATA</td><td></td></tr> </table>

empty-cellsを使用しない場合、空セルに半角スペースを挿入することで罫線を表示し、各ブラウザの表示を揃えることができる。


IE7での表示	Firefoxでの表示

サンプルソース: 2-3-5 sample02-03-05.html

table {border: solid 2px blue} td {border: solid 2px red; padding: 10px}

<table> <tr><td>DATA</td><td>DATA</td><td>DATA</td></tr> <tr><td>DATA</td><td>DATA</td><td>DATA</td></tr> <tr><td>DATA</td><td>DATA</td><td> </td></tr> </table>

content / quotes / counter-increment / counter-reset

contentなどのプロパティでは、コンテンツやカウンターの自動挿入を行うことができるが、IE7ではサポートされていない。CSSでテキストなどを挿入できる便利な機能だが、IEでの表示を考慮すると使用できないのが現状だ。


IE7での表示	Firefoxでの表示

サンプルソース: 2-3-6 sample02-03-06.html

h2:before {content: "第"counter(number)"章 "} h2 {counter-increment: number}

<h1>CONTENTS</h1> <h2>あいうえお</h2> <h2>かきくけこ</h2> <h2>さしすせそ</h2>

max-width / max-height / min-width / min-height

max-widthなどのプロパティは、横幅および高さの最大値、最小値を指定するもので、IE7正規版でサポートされた。

たとえば、文章部分の横幅をmax-widthプロパティで最大300ピクセル、min-widthで最小200ピクセルに設定すると、親要素<div>の横幅に応じて以下のように表示される。文章部分の横幅は300ピクセルより大きくならず、200ピクセルよりも小さくなることはない。なお、未対応のIE6では、文章部分は親要素と同じ横幅で表示される。


IE6での表示	IE7での表示	Firefoxでの表示

サンプルソース: 2-3-7 sample02-03-07.html

p {width: 100%; max-width: 300px; min-width: 200px; background-color: yellow; margin: 20px 0} #a {width: 400px} #b {width: 100px} div {border: solid 1px red; margin: 20px 0}

<div id="a"> <p>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p> </div> <div id="b"> <p>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p> </div>

高さの最大値/最小値を指定するmax-heightとmin-heightプロパティについても、以下のように機能する。ここでは、文章部分の高さの最大値を300ピクセル、最小値を200ピクセルに指定した。


IE6での表示	IE7での表示	Firefoxでの表示

サンプルソース: 2-3-8 sample02-03-08.html

p {height: 100%; max-height: 300px; min-height: 200px; background-color: yellow; margin: 0 20px} #a {height: 400px} #b {height: 100px} div {width: 150px; float: left; border: solid 1px red; margin: 0 20px}