img 与 {display: table-cell} ——这是一个错误吗？

发布于 2024-08-16 17:56:03 字数 1279 浏览 1 评论 0原文

我想使用 display: table-* CSS 属性来格式化照片列表。我相信下面是它的“正确”实现，理论上它没有任何问题，但它在 Firefox 和 Safari 中显示，表格布局搞砸了，正如你可以从边框看到的那样。为了进行比较，请尝试将下面的两个 img 标签包装在

中；这可以正确显示。

这是 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>

原文

I want to use the display: table-* CSS properties to format a list of photos. I believe that below is a "correct" implementation of it, in that there's nothing theoretically wrong with it, but it displays in Firefox and Safari with the table layout screwed up, as you can see by the borders. For a comparison, try wrapping both img tags below in a <div></div>; this displays properly.

This is something specific to the img tag, perhaps how big it thinks it is versus how much space it actually takes. Is this a bug?

The code below is a minimal provocation of this problem.

<!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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

鲜肉鲜肉永远不皱 2024-08-23 17:56:03

问题似乎主要是由于边界崩溃造成的。如果删除它，对齐问题就会消失。我似乎无法在网上找到任何其他关于此问题的讨论，但我注意到边框折叠中的错误：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 中的 Safari 4 中测试了这一点XP 和 XP 中的 Chrome 3 都在渲染边框折叠时出现错误。只有 Firefox 将图像表格单元格显示为低 1 个像素。

XP 中的 Opera 9.52 奇怪地根本不显示图像。
XP 中的 Opera 10.10 的行为与其他操作系统类似。

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

The problem seems to be mostly due to the border-collapse. If you remove that, the alignment problem goes away. I can't seem to find any other discussion of this problem online but I have noticed bugs in the border-collapse: collapse algorithm many times in Firefox and Safari (lines that disappear/reappear as you scroll, etc). This appears to be just another bug in that algorithm.

You're are right however, that it is specific to the image, if you wrap the images in divs, the problem goes away:

<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>

I've tested this in Firefox 3.1 in Ubuntu and XP, Firefox 3.5 in XP, Safari 4 in Wine and XP, and Chrome 3 in XP and they ALL exhibit errors in rendering the border-collapse. Only Firefox shows the image table-cell as one pixel low.

Opera 9.52 in XP oddly does not display the image at all.
Opera 10.10 in XP behaves like the rest.

Perhaps there's something about the spec that causes so many browsers to interpret this way.

回复收藏 0 原文