Question

我想使用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>

Answer 1

问题似乎主要是由于边境崩溃。如果删除它，对齐问题就会消失。我似乎无法在网上找到关于这个问题的任何其他讨论，但我注意到在边界崩溃中的错误：在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表现得和其他人一样。

也许有一些关于规范的东西会导致很多浏览器以这种方式解释。

Answer 2

我在FF中渲染代码时看到了你的意思。我最初的想法是doctype，但它对松散，过渡或严格没有帮助。

在http://www.w3.org/TR/CSS2/tables.html#table-display处查看W3C参考文件这是一段摘录：

例如，设置为的图像 'display：table-cell'将填充可用的单元空间及其尺寸可能有助于表格大小算法，如同一个普通的细胞。

在我看来，非容器元素只会填充“细胞空间”，但不会像真正的细胞一样。这解释了边界'错误'。

我认为基于FF / Webkit的浏览器错误地渲染它但IE是正确的。也许有人可以证明不是。：P

我的2美分。

img with {display：table-cell} - 这是一个错误吗？

2 个答案: