Firefox 3が対応したdisplayプロパティの値(3) - inline-table

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

テーブルとテキストを揃える位置

 テキストなどのインライン要素は、標準ではベースラインで揃えて表示することになっている。テキストにおけるベースラインは以下の図の赤線で示したラインのことで、欧文書体の基準線となっている。

ベースライン ベースライン

 一方、inline-tableボックスとして表示したテーブルにもベースラインが存在する。そのため、ブラウザによってテーブルとテキストを揃えた位置が異なるのは、inline-tableボックスのベースラインの位置設定が異なるためと考えられる。

 inline-tableボックスの場合、CSS 2ではどこがベースラインになるのかが定義されていない。しかし、CSS 2.1では「テーブルの最初の行をベースラインとする」と定義されており、Firefox 3やOperaはこの定義に従って表示を行っていると考えられる。一方で、SafariやInternet Explorer 8は、テーブルの下部をベースラインとして処理していると考えられる。

 なお、vertical-alignプロパティを利用すれば、テーブルとテキストをどこに揃えて表示するかを指定することが可能だ。たとえば、「vertical-align: top」と指定すると、次のように上を揃えて表示することができる。

Firefox 3の表示 Firefox 3の表示
Safariの表示 Safariの表示
Operaの表示 Operaの表示
Internet Explorer 8の表示 Internet Explorer 8の表示
table{
display: inline-table;
border: solid 3px #00aaff;
vertical-align: top;
}

td{
border: solid 2px #ccff00;
padding: 5px;
}
ブラウザで表示を確認する

 次回は、displayプロパティのまとめとして、inline-blockやinline-table以外のボックスと、各ブラウザの対応状況などを紹介したい。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]