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 中多次折叠算法（滚动时消失/重新出现的线条等）。这似乎只是该算法中的另一个错误。

但是，您是对的，它是特定于图像的，如果将图像包装在 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 将图像表格单元格显示为低一个像素。

奇怪的是，XP 中的 Opera 9.52 根本不显示图像。XP 中的 Opera 10.10 的行为与其他版本一样。

也许规范中有一些东西导致这么多浏览器以这种方式解释。

于 2009-12-30T03:41:33.170 回答
0

当我在 FF 中渲染代码时，我明白了你的意思。我最初的想法是文档类型，但它对松散、过渡或严格没有帮助。

浏览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 回答