displayプロパティの値と各ブラウザの対応をまとめる

エ・ビスコム・テック・ラボ
2008-05-23 13:27:01
  • このエントリーをはてなブックマークに追加

 前回までに、Firefox 3が対応したdisplayプロパティの値「inline-block」と「inline-table」を紹介した。しかし、displayプロパティでは他にもさまざまな値を指定することが可能だ。そこで今回は、CSSの標準規格で定義されているdisplayプロパティの値と、主要なブラウザにおける対応状況をまとめておく。

displayプロパティの値とCSSの標準規格

 displayはHTML/XHTMLでマークアップした部分のボックスの種類を指定するプロパティで、CSSのバージョンごとに次のような値を指定することができる。

displayプロパティの値とCSSの対応
ボックスの種類CSS 1CSS 2CSS 2.1CSS 3
inline
block
inline-block - -
list-item
run-in -
compact - -
marker - - -
table -
inline-table -
table-row -
table-cell -
table-row-group -
table-header-group -
table-footer-group -
table-column -
table-column-group -
table-caption -
ruby - - -
ruby-base - - -
ruby-text - - -
ruby-base-group - - -
ruby-text-group - - -
none
inherit - -

displayプロパティの値とブラウザの対応

 displayプロパティの値と各ブラウザの対応状況は次のようになっている。Internet Explorerはほとんど対応していなかったが、バージョン8(ベータ版)での対応が進んでいる。

displayプロパティの値とブラウザの対応
displayプロパティの値FirefoxSafariOperaInternet Explorer
inline
block
inline-block3以上で対応8以上で対応
list-item6以上で対応
run-in××
compact×××
marker××××
table8以上で対応
inline-table3以上で対応8以上で対応
table-row8以上で対応
table-cell8以上で対応
table-row-group8以上で対応
table-header-group8以上で対応
table-footer-group8以上で対応
table-column×8以上で対応
table-column-group×8以上で対応
table-caption8以上で対応
ruby×××8以上で対応
ruby-base×××8以上で対応
ruby-text×××8以上で対応
ruby-base-group××××
ruby-text-group××××
none
inherit8以上で対応

 ここからは、ソースを交えながら各値について簡単に確認していく。

  • コメント(1件)
#1 F*   2008-05-24 10:10:12
CSS3 の inherit の件。すべての property が inherit と initail を受け付けるので、個々のプロパティで inherit を受け付けることを書くのをやめただけでは。http://www.w3.org/TR/2005/WD-css3-cascade-20051215/#inheritance
  • 新着記事
  • 特集
  • ブログ