CSS属性Box- sizing对Box Model没有影响

有这样一个问题，它让我思考。

表格单元格固定高度和边框问题

所以我这样做了。

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(点击图片)，在Firebug 1.8.2下的Firefox 6.0.2中，布局选项卡以及计算的高度显示所有<td>的高度为32px，边框为3px。

要么是错误的，或者我错过了一些简单的东西，或者我的盒模型的概念是错误的?

谁能帮我创建一下"box-sizing"one_answers"padding-box"的标签

这是Firefox实现box-sizing的一个已知问题。box-sizing的MDN页面显示:

指出
见bug 243412及其依赖项:
-moz-box-sizing不适用于表格单元格

相关内容

最新更新

热门标签：