3

display: table-*CSS プロパティを使用して、写真のリストをフォーマットしたいと考えています。以下は、理論的には何も問題がないという点で、「正しい」実装であると思いますが、境界線でわかるように、Firefox と Safari では表のレイアウトが台無しに表示されます。比較のために、以下の両方の img タグを<div></div>;で囲んでみてください。これは正しく表示されます。

これは img タグに固有のものであり、おそらく、実際にどれだけのスペースを必要とするかに対して、それがどのくらい大きいと考えているかです。これはバグですか？

以下のコードは、この問題の最小限の挑発です。

<!DOCTYPE html>
<html>
    <head>
        <style>
            .photos {display: table; border-collapse: collapse;}
            .photos > div {display: table-row}
            .photos > div > * {
                display: table-cell;
                vertical-align: top;
                border: 1px solid #000;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <div class="photos">
            <div>
                <p>Hello World</p>
                <img src="http://www.freeimages.co.uk/galleries/nature/weather/thumbs/frost_oak_leaf_winter_218310.jpg" />
            </div>
            <div>
                <p>Hello World</p>
                <img src="http://www.freeimages.co.uk/galleries/nature/weather/thumbs/frost_oak_leaf_winter_218310.jpg" />
            </div>
        </div>
    </body>
</html>
4

2 に答える 2

3

問題は主に国境崩壊によるものと思われます。それを取り除くと、アライメントの問題はなくなります。この問題に関する他の議論をオンラインで見つけることができないようですが、Firefox と Safari で何度も border-collapse: collapse アルゴリズムにバグがあることに気付きました (スクロールすると行が消えたり再表示されたりするなど)。これは、そのアルゴリズムの単なる別のバグのようです。

ただし、画像に固有のものであることは正しいです。画像をdivでラップすると、問題はなくなります。

<html>
<head>
    <style>
        .photos {display: table; border-collapse: collapse;}
        .photos > div {display: table-row; border-collapse: collapse;}
        .photos > div > * {
            border-collapse: collapse;
            display: table-cell;
            vertical-align: top;
            border: 1px solid #000;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="photos">
        <div>
            <p>Hello World</p>
            <div><img src="http://www.studentsoftheworld.info/sites/music/img/23448_shopping_bags1.gif" /></div>
            <p>Hello World</p>
        </div>
        <div>
            <p>Hello World</p>
            <div><img src="http://www.studentsoftheworld.info/sites/music/img/23448_shopping_bags1.gif" /></div>
            <p>Hello World</p>
        </div>
    </div>
</body>
</html>

Ubuntu と XP の Firefox 3.1、XP の Firefox 3.5、Wine と XP の Safari 4、および XP の Chrome 3 でこれをテストしましたが、それらはすべて境界線の折りたたみのレンダリングでエラーを示します。Firefox のみが、画像のテーブル セルを 1 ピクセル低く表示します。

XP の Opera 9.52 では奇妙なことに画像がまったく表示されません。XP の Opera 10.10 は他のものと同じように動作します。

おそらく、非常に多くのブラウザがこのように解釈する原因となる仕様が何かあるのでしょう。

于 2009-12-30T03:41:33.170 に答える
0

コードをFFでレンダリングすると、あなたの意図がわかりました。私が最初に考えたのは doctype でしたが、それはルーズ、トランジショナル、またはストリクトには役に立ちません。

http://www.w3.org/TR/CSS2/tables.html#table-displayでW3C リファレンスを調べます。
抜粋を次に示します。

たとえば、'display: table-cell' に設定された画像は、使用可能なセル スペースを埋め、通常のセルと同様に、そのサイズがテーブルのサイズ変更アルゴリズムに影響を与える可能性があります。

非コンテナ要素は「セル空間」を埋めるだけで、真のセルのようには振る舞わないように思えます。これは、境界の「バグ」を説明しています。

FF/Webkit ベースのブラウザーが間違ってレンダリングしているとは思いませんが、IE は正しいです。おそらく、誰かがそうでないことを証明できるでしょう。:P

私の2セント。

于 2009-12-30T00:39:57.733 に答える