CSS 属性 Box-Sizing 对 Box Model 没有影响答案

【问题标题】：CSS property Box-Sizing has no effect on the Box ModelCSS 属性 Box-Sizing 对 Box Model 没有影响
【发布时间】：2011-11-25 03:58:56
【问题描述】：

发布了这个问题，它让我思考。

table cell fixed height and border issue in firefox

所以我做了如下。

HTML：

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>Template</title>
            <link rel="stylesheet" href="styles.css" />
        </head>
        <body>

            <table id="first" cellpadding="0" cellspacing="0">
                <tbody>
                    <tr>
                        <td>Cell 1</td>
                        <td>Cell 2</td>
                        <td>Cell 3</td>
                        <td>Cell 4</td>
                        <td>Cell 5</td>
                    </tr>
                </tbody>
            </table>

            <table id="second" cellpadding="0" cellspacing="0">
                <tbody>
                    <tr>
                        <td>Cell 1</td>
                        <td>Cell 2</td>
                        <td>Cell 3</td>
                        <td>Cell 4</td>
                        <td>Cell 5</td>
                    </tr>
                </tbody>
            </table>

            <table id="third" cellpadding="0" cellspacing="0">
                <tbody>
                    <tr>
                        <td>Cell 1</td>
                        <td>Cell 2</td>
                        <td>Cell 3</td>
                        <td>Cell 4</td>
                        <td>Cell 5</td>
                    </tr>
                </tbody>
            </table>

        </body>
    </html>

使用以下 CSS：

* {
    padding: 0;
    margin: 0;
    font: 15px arial, sans-serif;
    line-height: 1;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    float: left;
    margin-left: 5px;
}
table#first tbody tr td { 
    height: 35px; 
    border-bottom: 5px solid #000;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
} 
table#second tbody tr td { 
    height: 35px; 
    border-bottom: 5px solid #000;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
} 
table#third tbody tr td { 
    height: 35px; 
    border-bottom: 5px solid #000;
    box-sizing: padding-box;
    -moz-box-sizing: padding-box;
}

问题在于，无论 box-sizing 属性的值为border-box（点击查看图片）、content-box（点击查看图片）和padding-box（点击查看图片），在 Firefox 6.0.2 中，在 Firebug 1.8.2 下，布局选项卡以及计算的高度显示所有 <td> 的高度为 32px，边框为 3px。

要么有问题，要么我遗漏了一些简单的东西，或者我对盒子模型的概念有误？

也有人可以为“box-sizing”和“padding-box”创建标签

【问题讨论】：

"也有人可以为 'box-sizing' 和 'padding-box' 创建标签" 我不明白这样做的意义。每个问题只能使用 5 个标签，这些标签看起来更像是填充物，而不是具有任何真正分类含义的标签。
@BoltClock - 之前已经完成了。 “colgroup”标签不存在 - stackoverflow.com/questions/6318185/… - 我不介意，但我只是认为未来用户将使用 box-sizing 或 padding-box 进行搜索会更容易
这个赏金是怎么回事？我没有这样做！

标签： html firefox css

【解决方案1】：

这是 Firefox 实现 box-sizing 的一个已知问题。 The MDN page for box-sizing 说：

注意事项

见bug 243412 及其家属：

-moz-box-sizing 不适用于表格单元格

【讨论】：

如果我将所有 td 设置为 display: inline-block; ?
显然，每个浏览器都有问题。在 Safari 5.1、Chrome 14、IE9 和 Opera 11 中测试：jsfiddle.net/BoltClock/6Jr4H/1
可以显示：inline-block;边框框为 30px+5px，内容框为 35px+5px，填充框为 35px+5px。似乎这是一种解决方法。太笨了，没有资格获得 CSS hack。