css - 带有{显示: table-cell} -- is it a bug?的img-6ren

css - 带有{显示: table-cell} -- is it a bug?的img

转载作者：行者123 更新时间：2023-11-28 11:51:13

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

最佳答案

这个问题似乎主要是由于边界崩溃。如果删除它，对齐问题就会消失。我似乎无法在网上找到关于此问题的任何其他讨论，但我注意到 border-collapse: collapse 算法在 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>