none
テーブルの外で指定した text-align が td 要素にも適用されてしまう RRS feed

  • 質問

  • IE8 RC1 でいろいろやっていたら以下のような現象を発見しました。

    以下のHTML を IE8 または IE7 モード(?)で表示すると table の外の
    class="center" が table の td 要素にまで効いてしまうようです。
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html lang="ja">
    <head>
      <meta http-equiv="x-ua-compatible" content="ie=8">
      <meta http-equiv="content-type" content="text/html; charset=shift_jis">
      <meta http-equiv="content-style-type" content="text/css; charset=shift_jis">
      <style type="text/css">
    <!--
    /* 中央揃え */
    .center {
        text-align: center;
    }
    div.center table, td.center table {
     margin: auto;
    }
    /* 分かりやすくするため罫線を入れる */
    table.frame, table.frame th, table.frame td {
        border: solid 1px;
        border-collapse: collapse;
    }
    -->
      </style>
      <title>テスト</title>
    </head>
    <body>
    <div class="center">
    <table style="width: 743px;" class="frame" summary="フォーム">
    <tr>
      <td>テスト</td>
      <td>テスト</td>
    </tr>
    </table>
    </div>
    </body>
    </html>

    因みに他のブラウザや IE6 モード(content="ie=6")では再現しませんでした。
    text-align は center のみではなく right でも再現しました。
    回避(デフォルトの左寄せに)するには td 要素に
    text-align: left を
    指定しないといけないようです。

    この動作は間違っていると思います。
    2009年2月18日 6:41

回答

  • text-align は 親ブロックのものを継承するようにできているので、それで合っていると思います。
    W3C のドキュメントにも、

    In this example, note that since 'text-align' is inherited, all block-level elements inside DIV elements with a class name of 'important' will have their inline content centered.

    div.important { text-align: center }

    …と、「継承する」ことが書かれています。
    (でも、direction に応じて既定値が right/left になる、という記述もあるので、矛盾してるんですけどね(汗))
    2009年3月1日 8:47
  • 仕様は
     → http://www.w3.org/TR/CSS21/text.html#propdef-text-align
    にあります。

    text-align の対象は ブロック、インラインブロック、テーブルのセル(要するに箱状のエレメント) だそうですョ。
    2009年3月12日 10:58

すべての返信

  • text-align は 親ブロックのものを継承するようにできているので、それで合っていると思います。
    W3C のドキュメントにも、

    In this example, note that since 'text-align' is inherited, all block-level elements inside DIV elements with a class name of 'important' will have their inline content centered.

    div.important { text-align: center }

    …と、「継承する」ことが書かれています。
    (でも、direction に応じて既定値が right/left になる、という記述もあるので、矛盾してるんですけどね(汗))
    2009年3月1日 8:47
  • Nifty the Slug の発言:

    text-align は 親ブロックのものを継承するようにできているので、それで合っていると思います。
    W3C のドキュメントにも、

    In this example, note that since 'text-align' is inherited, all block-level elements inside DIV elements with a class name of 'important' will have their inline content centered.

    div.important { text-align: center }

    …と、「継承する」ことが書かれています。
    (でも、direction に応じて既定値が right/left になる、という記述もあるので、矛盾してるんですけどね(汗))

    じゃあ、他のブラウザの表示もおかしいという事なのでしょうか。
    確か、  text-align って、仕様上はブロック要素には効かないとなっていた
    ような気が...。
    (その為、テーブルをセンタリングするには IE の text-align: center と
    他のブラウザ向けの margin: auto をしないといけないようになってたはず)

    古いIE及びIEの互換モードではバグの影響で text-align が有効で
    margin: auto が無効なようですが...。
    2009年3月8日 17:03
  • 仕様は
     → http://www.w3.org/TR/CSS21/text.html#propdef-text-align
    にあります。

    text-align の対象は ブロック、インラインブロック、テーブルのセル(要するに箱状のエレメント) だそうですョ。
    2009年3月12日 10:58
  • こんにちは、フォーラムオペレータ大久保です。

    infade さん、フォーラムのご利用ありがとうございます。
    にふてぃ さん、いつもありがとうございます。

    勝手ながら、にふてぃ さんの投稿を「回答としてマーク」させていただきました。
    また何かありましたらフォーラムをご利用ください!おまちしております。


    マイクロソフト株式会社 フォーラム オペレータ 大久保 直美
    2009年4月7日 5:18