Fatal编程技术网
  • css/
  • Css 带有{display:table cell}的img——这是一个bug吗？

Css 带有{display:table cell}的img——这是一个bug吗？

css image

Css 带有{display:table cell}的img——这是一个bug吗？,css,image,css-tables,Css,Image,Css Tables,我想使用display:table-*CSS属性格式化照片列表。我相信下面是它的一个“正确”实现，理论上它没有什么问题，但是它在Firefox和Safari中显示时，表格布局被弄乱了，正如你从边框可以看到的那样。为了进行比较，请尝试将下面的两个img标记包装成；这将正确显示 这是img标签特有的东西，可能是它认为它有多大，而实际上它占用了多少空间。这是虫子吗 下面的代码是对这个问题的最小挑衅 <!DOCTYPE html> <html> <head>

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


.photos{显示：表格；边框折叠：折叠；}
.photos>div{display:table row}
.photos>div>*{
显示：表格单元格；
垂直对齐：顶部；
边框：1px实心#000；
填充：10px；
}
你好，世界

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

在
这里有一段摘录：

例如，设置为 “显示：表格单元格”将填充 可用单元格空间及其 维度可能有助于 表大小调整算法，如 普通细胞

在我看来，非容器元素只会填充“单元空间”，但不会像真正的单元那样工作。这就解释了边界“bug”

我不认为基于FF/Webkit的浏览器渲染错误，但IE是正确的。也许有人能证明不是这样P

我的2美分。

这个问题似乎主要是由于边界崩溃。如果删除该选项，对齐问题就会消失。我似乎在网上找不到关于这个问题的任何其他讨论，但我注意到了边界折叠中的错误：Firefox和Safari中多次出现了折叠算法（滚动时消失/重新出现的行，等等）。这似乎只是该算法中的另一个bug

但是，您是对的，这是特定于图像的，如果您将图像包装在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>


.photos{显示：表格；边框折叠：折叠；}
.photos>div{显示：表行；边框折叠：折叠；}
.photos>div>*{
边界塌陷：塌陷；
显示：表格单元格；
垂直对齐：顶部；
边框：1px实心#000；
填充：10px；
}
你好，世界

你好，世界

你好，世界

你好，世界
我在Ubuntu和XP中的Firefox 3.1、XP中的Firefox 3.5、Wine和XP中的Safari 4以及XP中的Chrome 3中对此进行了测试，它们在渲染边界崩溃时都会出现错误。只有Firefox将图像表格单元格显示为低一个像素

奇怪的是，XP中的Opera9.52根本不显示图像。 XP中的Opera 10.10的行为与其他类似

也许是该规范的某些方面导致了如此多的浏览器以这种方式进行解释。

你不想让它在IE6/7（或兼容模式下的IE8）上工作吗？事实上，根据o.k.w.的说法，这不是IE6/7的问题。它只在IE中工作得很好，但在Firefox或Safari（我测试的仅有的两种浏览器）中工作得不好。在Firefox和Safari中，img表格单元格上的边框与其他表格单元格的边框分开。在什么情况下在Webkit/Firefox上留下错误报告才合适？似乎我们已经将问题简化为img在标记中作为表单元的呈现，呈现为具有边框折叠的表：折叠。问题随着边界的分离而消失。这是否足够值得一个bug报告，或者我们还不确定这个行为是否符合W3C标准，实际上是一个bug？我只是这么做了，但还没有回应。