表格单元格边框是否算作其内容的一部分？答案

【问题标题】：Does a table cell border count as part of its content?表格单元格边框是否算作其内容的一部分？
【发布时间】：2015-11-06 14:26:38
【问题描述】：

以下文档在 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 给出的行为（这是我想要的）？

【问题讨论】：

标签： html css google-chrome firefox

【解决方案1】：

哪个浏览器的行为正确？

从技术上讲，两者的行为都是正确的。

他们每个人都以自己的方式解释规范，并且也有不同的方式来编译和呈现页面到您的屏幕。

如何修改代码以使它们都表现出 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>

看看上面的两个框，你会看到顶部元素只有 200px 的内容，然后在顶部添加边框和填充，而下面的元素，设置了 box-sizing: border-box 将拥有整个区域设置为 200px。

【讨论】：

box-sizing与浏览器渲染内表的哪里有什么关系？我不是在谈论它的大小。
您的问题表明边界未计入内容中，并且未按预期呈现。我会冒险猜测这是一个盒子尺寸问题。另一种选择是浏览器内置的 CSS 以这种方式呈现。无论哪种方式，功能都不是“不正确的”，而是每个浏览器如何处理不同的元素。