3

table-cellcss プロパティを使用するレイアウトで非常に奇妙な動作に出くわしました。現在のFF、Safari、およびChromeで次のコードを試しました。振る舞いはどこでも同じです。

私の質問は、誰かがなぜこれが起こるのか知っているかどうかです. それはブラウザのバグですか、それとも定義された動作ですか? 問題を解決する方法についてのヒントがあるこの質問を見つけましたが、そもそもなぜこれが起こっているのか知りたいです。他の人も知りたいと思います。

問題:  2 番目のテーブル セルでコメントすると、すべて問題ありません。ただし、divが空のままの場合、他の 2 つのセルのコンテンツには「オフセットトップ」のようなものがあります。このオフセットは、中央のセルの高さと同じ寸法です。つまり、外側のセルの内容が下に移動します。2 つのスクリーンショットdiv_not_empty.pngとdiv_empty.pngを追加しました。

ありがとう

更新 スクリーンショットを忘れました。どうぞ： 部門が空です Div は空ではありません

コード：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Strange behavior with table-cell formatting</title>
    <style type="text/css" media="screen">
      #table {
        display:    table;
        background: #efefef;
      }
      div.cell {
        display:    table-cell;
      }
      #c1 div.content {
        width:    200px;
      }
      #c2 {
        border-left: 2px solid #ccc;
      }
      #c2 div.content {
        height:   150px;
        width:    150px;
        background: #aaa;
        vertical-align: bottom;
      }
      #c3 {
        width:    200px;
        border-left: 2px solid #ccc;
      }
    </style>
  </head>
  <body>
    <div id="table">
      <form id="c1" class="cell">
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing 
          elit, sed do eiusmod tempor incididunt ut.
        </div>
      </form>
      <div id="c2" class="cell">
        <div class="content">
          <!-- &nbsp; -->
        </div>
      </div>
      <div id="c3" class="cell">
        <div class="content">
           Dolore magna aliqua. Ut enim ad minim veniam, 
           quis nostrud exercitation ullamco laboris nisi ut 
           aliquip ex ea commodo consequat. Duis aute irure 
           dolor in reprehenderit.
        </div>
      </div>
    </div>
  </body>
</html>
4

1 に答える 1

6

計算方法と関係があります-テーブルセルに適用すると、「セルの下端のパディングエッジを行の下端に揃えます」というmdcドキュメントvertical-align: bottomを参照してください。bottom

表のセルにコンテンツがない場合、パディングはボックスに描画されません (つまり、0 の場合、コンテンツがある場合、ブラウザはパディングがどこにあるかを計算します)。

要素には、&nbsp;配置の基礎として使用するコンテンツがあります。これがないと、ブラウザーが要素自体の下部を、他の要素のコンテンツの最初の行の下部に合わせて並べることに気付くでしょう。

re:リンク先の質問vertical-align: topは、ブロック要素に含まれるコンテンツではなく、ブロック要素の上部に基づいてレイアウトが計算されるため、機能します。

この問題を簡単に修正するには、スタイルシートの .content div にパディングを追加します。これにより、コンテンツがあるかのようにレンダリングされます。つまり、&nbsp;表示するものが何もない場合、コードに 's を含める必要はありません。

  div.content {
    height:   150px;
    padding-bottom: 1px;
  }

これを試してみると、期待どおりに動作することがわかります。

そう; ブラウザーは要素のコンテンツ (またはパディングの下部) に基づいて位置を計算しようとしており、要素にはコンテンツがないため、実際にはブラウザーのバグではありません。ただし、この場合、仕様の意図しない副作用の可能性があります。

関連する注意事項として、CSS ルールが要素div.cellである最初の「セル」と一致していません。form要素内のすべての要素display: tableがdisplay: table-cell自動的に適用されているため、機能していますが、最適ではありません。

于 2012-11-27T22:37:42.417 に答える