IE8が対応したCSS 2.1の機能：displayプロパティなど3種類を解説

エ・ビスコム・テック・ラボ
2009-05-15 19:34:02
  • このエントリーをはてなブックマークに追加

　今回は、IE8が対応した次の3つのプロパティについて確認していきたい。

  • display
  • list-style-type
  • white-space

　これらのプロパティには古いIEも対応しているが、CSS 2.1で定義されたすべての値に対応していたわけではなかった。IE8では定義された値を一通りサポートするようになっている。そこで、今回はこれらのプロパティの値のうち、IE8が新しくサポートしたものについて確認していきたい。

　なお、新しく対応した機能を利用するにはIE8のStandardsモード（標準準拠モード）で表示する必要がある。Standardsモードや互換表示ボタンについては第2回の記事「IE8のレンダリングモードと互換表示」を参照してほしい。

displayプロパティ

　IE8はdisplayプロパティの値のうち、古いIEで未対応だったrun-inとinline-block、テーブル関連の値に対応した。ここでは、それぞれの値についてどのように対応したかを確認していきたい。

　なお、displayプロパティについて詳しくは「Firefox 3が対応したdisplayプロパティの値（1）」を参照してほしい。

run-in

　「display:run-in」と指定するとrun-inボックスを構成し、後に続くblockボックスに含めて表示される。

サンプル1 サンプル1 
dt{
display: run-in;
border: solid 2px red;
}

dd{
margin-left: 100px;
background-color: yellow;
}



挨拶


「おはよう」「こんにちは」「こんばんは」「おやすみ」など。
※ブラウザで表示を確認する

inline-block

　「display:inline-block」の指定は、古いIEでもインライン要素に適用した場合は機能していたが、IE8ではブロック要素に適用した場合も機能するようになった。

　たとえば、次のように「display:inline-block」と指定すると

でマークアップしたテキスト部分がinline-blockボックスとなる。inline-blockボックスにはwidthプロパティで横幅を指定することができるため、各テキストの横幅を揃えて横に並べて表示することができる。

サンプル2 サンプル2 
div{
display: inline-block;
background-color: #00aaff;
width: 200px;
text-align: center;
padding: 5px;
}

おはよう


こんにちは
※ブラウザで表示を確認する

テーブル関連の値

　IE8はdisplayプロパティに用意されたテーブル関連の値に対応した。テーブル関連の値は以下の7種類となっている。

  • table
  • inline-table
  • table-row
  • table-cell
  • table-row-group
  • table-header-group
  • table-footer-group

　たとえば、次のサンプルはキャプションも含めてすべて

でマークアップしたものだが、テーブル関連の値を適用することでテーブルとして表示することができる。

サンプル3 サンプル3 
.table{
display: table;
border: solid 3px #00aaff;
}
 
.caption{
display: table-caption;
text-align: center;
}
 
.tr{
display: table-row
}
 
.td{
display: table-cell;
border: solid 2px #aaff00;
padding: 10px;
}
 
.thead{
display: table-header-group;
background-color: #ffffaa;
}


 

ひらがなの表

 





あ
い
う
え
お





…略…
※ブラウザで表示を確認する

　なお、テーブル関連の値について詳しくは「Firefox 3が対応したdisplayプロパティの値（3） - inline-table」を参照してほしい。

list-style-typeプロパティ

  • 新着記事
  • 特集
  • ブログ