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

我想使用display: table-* CSS属性来格式化照片列表。我相信下面是它的一个“正确的”实现，因为理论上它没有什么问题，但是它会在Firefox和Safari中显示表格布局搞乱了，就像你在边界看到的一样。为了进行比较，请尝试将以下两个img标签包装在<div></div>;这显示正确。img {display：table-cell} - 它是一个错误吗？

这是特定于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>

来源

2009-12-30 Danny Roberts

你不希望这个工作在IE6/7（或在共同模式下的8）？ – cletus 2009-12-30 00:27:20

这不是IE6/7的问题，实际上根据o.k.w.它*仅*在IE中很好地工作，但不在Firefox或Safari中，这是我测试的仅有的两个浏览器。在Firefox和Safari中，img表格单元格上的边界与其他表格单元格的边界关闭。 – 2009-12-30 04:27:54

什么时候适合在Webkit/Firefox上留下错误报告？看起来我们已经将问题简化为img的呈现方式，将其作为table-cell内的标记呈现为带有border-collapse：collapse的表格。问题与分离的边界消失。这足以得出一个错误报告，或者我们还不确定这种行为是否符合W3C标准，并且实际上是一个错误？ – 2009-12-30 15:33:23

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

XP中的Opera 9.52奇怪地根本不显示图像。 XP中的Opera 10.10的行为与其余的一样。

也许有一些关于规范，导致如此多的浏览器来解释这种方式。

来源

2009-12-30 03:41:33

我明白你在FF中渲染代码的含义。我最初的想法是文档类型，但它对松散，过渡或严格没有帮助。

通过W3C参考在http://www.w3.org/TR/CSS2/tables.html#table-display
这里发生的摘录：

例如，它被设置为图像“显示：表小区”将填充可用小区的空间，并且它的尺寸可能有助于表格尺寸算法，与一样是普通细胞。

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

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

我的2美分。

来源

2009-12-30 00:39:57

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

回答

相关问题