带有 {display: table-cell} 的 img - 这是一个错误吗？答案

【问题标题】：img with {display: table-cell} -- is it a bug?带有 {display: table-cell} 的 img - 这是一个错误吗？
【发布时间】：2017-01-21 07:45:48
【问题描述】：

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

【问题讨论】：

您不希望它在 IE6/7（或兼容模式下的 8）上运行吗？
这不是 IE6/7 的问题，实际上根据 o.k.w.它only 在 IE 中运行良好，但在 Firefox 或 Safari（我测试过的仅有的两个浏览器）中却不行。在 Firefox 和 Safari 中，img 表格单元格的边框与其他表格单元格的边框不同。
什么时候最好在 Webkit/Firefox 上留下错误报告？似乎我们已将问题减少为 img 在标签内渲染为表格单元格，该标签渲染为带有边框折叠的表格：折叠。这个问题随着单独的边界而消失。这是否足以值得报告错误，或者我们还不确定这种行为是否不符合 W3C 标准并且实际上是错误？
我只是这样做了bugzilla.mozilla.org/show_bug.cgi?id=537201，但还没有回应。

标签： css image css-tables

【解决方案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 的行为与其他版本一样。

也许规范的某些原因导致许多浏览器以这种方式解释。

【讨论】：

【解决方案2】：

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

通过http://www.w3.org/TR/CSS2/tables.html#table-display 处的 W3C 参考资料
摘录如下：

例如，设置为 'display: table-cell' 将填充可用单元空间，及其维度可能有助于表大小算法，与一个普通的细胞。

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

我犹豫是否认为基于 FF/Webkit 的浏览器会错误地呈现它，但 IE 是正确的。也许有人可以证明并非如此。 :P

我的 2 美分。

【讨论】：