與表格單元格佈局和空div的奇怪行爲

我只是偶然發現了一個非常奇怪的行爲，其佈局使用了table-cell css屬性。我在當前的FF，Safari和Chrome中嘗試了以下代碼。行爲在任何地方都是一樣的。與表格單元格佈局和空div的奇怪行爲

我的問題是否有人知道爲什麼發生這種情況。它是瀏覽器錯誤還是定義的行爲？我發現this問題有一個關於如何解決問題的暗示，但我想知道爲什麼這是發生在第一位。我想其他人也想知道。

問題：如果我在 在第二個表格單元格中發表評論，一切都很好。但是，如果div保持空白，則其他兩個單元格的內容具有類似「偏移頂部」的內容。此偏移量與中間單元格的高度尺寸相同。即外部單元的內容被移動到底部。我添加了兩張截圖 div_not_empty.png和 div_empty.png。

感謝

更新我忘了截圖。在這裏，他們是： Div is empty Div is not empty

代碼：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <title>Strange behavior with table-cell formatting</title> 
    <style type="text/css" media="screen"> 
     #table { 
     display: table; 
     background: #efefef; 
     } 
     div.cell { 
     display: table-cell; 
     } 
     #c1 div.content { 
     width: 200px; 
     } 
     #c2 { 
     border-left: 2px solid #ccc; 
     } 
     #c2 div.content { 
     height: 150px; 
     width: 150px; 
     background: #aaa; 
     vertical-align: bottom; 
     } 
     #c3 { 
     width: 200px; 
     border-left: 2px solid #ccc; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="table"> 
     <form id="c1" class="cell"> 
     <div class="content"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing 
      elit, sed do eiusmod tempor incididunt ut. 
     </div> 
     </form> 
     <div id="c2" class="cell"> 
     <div class="content"> 
      <!-- &nbsp; --> 
     </div> 
     </div> 
     <div id="c3" class="cell"> 
     <div class="content"> 
      Dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut 
      aliquip ex ea commodo consequat. Duis aute irure 
      dolor in reprehenderit. 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

來源

2012-11-27 beipawel

它有與vertical-align: bottom的計算方法做 - 看mdc docs，當應用於表格單元格，bottom「對齊單元格的底部填充邊與該行的底部「。

當表格單元格沒有內容時，填充不在框中繪製（即當0時，如果有內容，瀏覽器會計算填充的位置）。

使用 元素，可以使用內容作爲對齊的基礎;沒有它，你會注意到瀏覽器將元素本身的底部與其他元素中第一行內容的底部對齊。

回覆：您鏈接到的問題，使用vertical-align: top作品，因爲佈局是根據塊元素的頂部計算的，而不是它們包含的內容。

解決此問題的一個簡單方法是向樣式表中的.content div添加填充，然後使它們呈現爲好像它們具有內容一樣，這意味着在代碼中不需要有 的填充沒有什麼可顯示的：

div.content { 
    height: 150px; 
    padding-bottom: 1px; 
    }

試試這個，你會發現它的行爲與你的期望相同。

所以;並非真正的瀏覽器錯誤，因爲瀏覽器正在嘗試根據元素的內容（或填充底部）來計算位置，並且該元素沒有內容。在這種情況下，規格可能是一種無意的副作用。

在相關說明中，您的css規則div.cell與第一個「單元格」不匹配，該單元格是form元素。它的工作原理是display: table元素中的所有元素都自動應用display: table-cell，但不是最好的。

來源

2012-11-27 22:37:42

thx，這使得它更加清晰。是的，表單元素在那裏，因爲我從我的編輯器中複製了錯誤的版本，對此抱歉。 – beipawel

與表格單元格佈局和空div的奇怪行爲

回答

相關問題