表格單元格邊框是否作爲其內容的一部分進行計數？

以下文檔不同的呈現在Firefox和Chrome：表格單元格邊框是否作爲其內容的一部分進行計數？

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Table rendering test</title> 
     <style> 
      table { 
       border-collapse: collapse; 
       border-spacing: 0; 
       padding: 0; 
       background-color: #ffffff; 
       border: 2px solid black; 
      } 
      table td { 
       border: 1px solid black; 
       padding: 5px; 
      } 
      tr.testRow > td { 
       border-left-width: 0; 
       border-right-width: 0; 
       padding: 0; 
      } 
      tr.testRow table { 
       border-color: #ff0000; 
      } 
     </style> 
    </head> 
    <body> 
     <table> 
      <tr> 
       <td>cell1.1</td> 
       <td>cell1.2</td> 
       <td>cell1.3</td> 
      </tr> 
      <tr class="testRow"> 
       <td>cell2.1</td> 
       <td colspan="2"> 
        <table> 
         <tr> 
          <td>internal table cell</td> 
         </tr> 
        </table> 
       </td> 
      </tr> 
     </table> 
    </body> 
</html>

火狐：

鉻：

注意Firefox沒有怎麼不算右下角單元格的邊框作爲其一部分它的內容，所以「內部表格」呈現在上述單元格邊界右側1個像素。但是，Chrome會將「內部表格」呈現在與上述單元格邊界相同的水平位置。

這兩種瀏覽器都在標準模式下運行。哪個瀏覽器顯示正確的行爲？我怎樣才能修改代碼，使它們都表現出Chrome的行爲（這是我想要的）？

來源

2015-11-06 Jez

哪個瀏覽器顯示正確的行爲？

從技術上講，兩者都表現正確。

他們每個人都以他們自己的方式解釋規範，並且也有不同的編譯方式和渲染頁面到屏幕。

如何修改代碼以使它們都表現出Chrome的行爲？

使用CSS屬性box-sizing。

如果您也設置爲border-box，它將始終包含填充和邊框到元素的寬度。

.box { 
 
    width: 200px; 
 
    height: 75px; 
 
    border: 5px solid black; 
 
    padding: 10px; 
 
    margin-bottom: 10px; 
 
} 
 
.with_sizing { 
 
    box-sizing: border-box; 
 
}

<div class="box">This is a box with no box sizing</div> 
 
<div class="box with_sizing">This is a box with box sizing</div>

看一看上面的兩個箱子，你會看到，頂部元素只具有的內含物在200像素，然後添加邊框和填充在上面，而下面的元素，其中有box-sizing: border-box設置將整個區域設置爲200px。

來源

2015-11-06 14:49:04 Stewartside

「box-sizing」與*其中*瀏覽器呈現內部表格有什麼關係？我不是在談論它的大小。 – Jez

您的問題表明邊框不會被計入內容中，並且不會按預期進行渲染。我會猜測這是一個盒子尺寸問題。另一種選擇是瀏覽器內置的CSS就是這樣渲染的。無論哪種方式，功能不是「不正確」，而是每個瀏覽器如何處理不同的元素。 – Stewartside

表格單元格邊框是否作爲其內容的一部分進行計數？

回答

相關問題