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} - 它是一個錯誤嗎？

回答

相關問題