Chrome box model is wrongwhen div display:table!_问答_开发者

I made a site with simple instructions let's say:

<html>
<head>
<style type="text/css">
.a120 {
background-image:url('image/back.jpg');
width:1004px;
border: 1px solid #333333;
 }
</style>
</head>
<body>
<div class="a120">bfahksbdhabdb</div>
</body>
</html>

*back.jpg is 1004 pixels wide.

And then the crazy thing:

IE8, FF35, Opera9, they all show the div.a120 with a background width of 1004px that matches the width of the div and also a border of 1px on each side.

CHROME, shows me the same, at least initially. I used a floating menu on top of the div.a120 with a width of 1004px and surprise, I realised Chrome did this to div.a120:

|-1px border 开发者_开发百科 -1002px div width- 1px border-|

sum=1004px!!!!

Is this a normal behaviour or am I wrong?

When you use a table instead of a div with display: table the behaviour is obviously a table, but when I use display:table isn't supposed to be just a div with table vew or it becomes a table?

Thanks in advance.

A short example (change the width of the orange panel and you'll see how it covers the black border):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>gfgfg fds f sdf sdf sd fsd f sd</title>
</head>

<body style="margin:0">
<div style="width:1004px; display: table;margin: 0 auto; border: 1px solid black">
<div style="width:967px; height:16px;background-color: #666666;border:none"><div style="width: 37px; float: right;margin-right:-37px; background-color:#ff3300">gfgfg<br />
    fds<br />
    f<br />
    sdf<br />
    sdf<br />
    sd<br />
    fsd<br />
    f<br />
    sd<br />
    ffsd<br />
    s<br />
    fsd<br />
    f<br />
    dsf<br />
    d<br />
    fsd<br />
    f</div>
dasdasdas</div>
<div style="width:967px; display:table">dasdasdas<br />
    dgf<br />
    sdf<br />
    <br />
    sdfdf<br />
    s<br />
    sdf<br />
    fds<br />
    fsd<br />
    <br />
    sdf</div>
<div style="width:967px; height:16px;">dasdasdas</div>
</div>

</body>

</html>

If you say display as a common type, it shouldn't have some hybrid fusion of inheritance, it should pick up the display properties of the type; in your case, the border width inclusion properties of a table vs a div.

Tables include the border width in the total in Chrome as opposed to a div which doesn't.

Here is a test with your code (strict doctype), a standard table and a table displaying as a div. You can see the border width inclusion differences this way:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>gfgfg fds f sdf sdf sd fsd f sd</title>
</head>

<body style="margin:0">
    <div style="width:1004px; display: table;margin: 0 auto; border: 1px solid black;">
        <div style="width:967px; height:16px;background-color: #666666;border:none">
            <div style="position: relative; width: 37px; float: right;margin-right:-37px; top: 30px;background-color:#ff3300">gfgfg<br />
                sdf<br />
                f<br />
            </div>
        Div Displaying as table
        </div>
        <div style="width:967px; display:table">dasdasdas<br />
            dgf<br />
            <br />
            sdf</div>
        <div style="width:967px; height:16px;">dasdasdas</div>
    </div>

    <table style="width:1004px; margin: 0 auto; border: 1px solid black;">
        <tr>
            <td style="width:967px; height:16px;background-color: #666666;border:none">
                <div style="position: relative; top: 10px;width: 37px; float: right;margin-right:-37px; background-color:#ff3300">gfgfg<br />
                    ds<br />
                    f<br />
                    sdf<br />
                </div>
                Table displaying as a table
            </td>
        </tr>
        <tr>
            <td style="width:967px; display:table">dasdasdas<br />
                dgf<br />
                sdf<br />
            </td>
        </tr>
        <tr>
            <td style="width:967px; height:16px;">dasdasdas</td>
        </tr>
    </table>

    <table style="width:1004px; display: block;margin: 0 auto; border: 1px solid black;">
        <tr>
            <td style="width:967px; height:16px;background-color: #666666;border:none">
                <div style="position: relative; top: 10px;width: 37px; float: right;margin-right:-37px; background-color:#ff3300">gfgfg<br />
                    asd<br />
                    f<br />
                    sdf<br />
                </div>
                Table displaying as block
            </td>
        </tr>
        <tr>
            <td style="width:967px; display:table">dasdasdas<br />
                dgf<br />
                sdf<br />
            </td>
        </tr>
        <tr>
            <td style="width:967px; height:16px;">dasdasdas</td>
        </tr>
    </table>


</body>

</html>