CSS property Box-Sizing has no effect on the Box Model_问答_开发者

CSS property Box-Sizing has no effect on the Box Model

开发者 https://www.devze.com 2023-04-07 08:30 出处：网络

There was this question posted and it got me thinking. table cell fixed height and border issue in firefox

相关专题：css firefox

There was this question posted and it got me thinking.

table cell fixed height and border issue in firefox

So I did as follows.

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>

开发者_开发知识库

With the following 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;
}

The problem is that regardless of the box-sizing property with values of border-box(click for pic), content-box(click for pic) and padding-box(click for pic), in Firefox 6.0.2, under Firebug 1.8.2, the layout tab as well as the computed height shows the height of all <td> to be 32px with a 3px border.

Either something is wrong, or I am missing something simple or my concept of the box-model is wrong?

Can also somebody please create the tags for "box-sizing" and "padding-box"

This is a known issue with Firefox's implementation of box-sizing. The MDN page for box-sizing says: