Question

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

Answer 1

哪种浏览器表现出正确的行为？

从技术上讲，两者都表现正常。

他们每个人都以自己的方式解释规范，并且还有不同的方法来编辑和渲染页面到你的屏幕。

如何修改代码以便它们都展示Chrome提供的行为？

使用CSS属性box-sizing。

如果你设置它border-box，它将始终包含填充和边框到元素的宽度。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

表格单元格边框是否计入其内容的一部分？

1 个答案: