
IE8が対応したCSS 2.1の機能:displayプロパティなど3種類を解説
今回は、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ボックスに含めて表示される。

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」と指定すると

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
たとえば、次のサンプルはキャプションも含めてすべて

.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プロパティ
- 新着記事
- 特集
- ブログ
- 企画特集
-
セキュリティの今を知る
-
利便性とセキュリティの両立
-
幸せ?不幸?ひとり情シス座談会
-
常識を疑え!
-
いままさに社会にとっての転換点
-
話題のセキュリティ事故体験ゲーム
-
明日からではもう遅い?!
-
講演の見どころを紹介
-
連載!プロが語るストレージ戦略
-
特集:IT最適化への道
-
中小企業でのひとり情シスIT運用術
-
内部不正や不注意をどう防ぐ?
-
連載!プロが語るストレージ戦略
-
DXができない企業が滅びる理由
-
漫画で解説!運用管理のコツ
-
デジタルを当たり前と言えるか?
-
連載!プロが語るストレージ戦略
-
さあ、クラウドで解決しよう。
-
ゼロトラストに不可欠なID管理
-
現場主導の業務変革のポイント
-
次の一手はこれだ!
-
ビッグデータ最前線!
-
企業DXのキモはクラウドにあり
-
モバイルデバイスもターゲットに!
-
Kubernetesの認定制度が開始
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]