Question

我创建了一个简单说明的网站，让我们说：

<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宽1004像素。

然后是疯狂的事情：

IE8，FF35，Opera9，它们都显示div.a120，背景宽度为1004px，与div的宽度相匹配，每边也有1px的边框。

CHROME，至少在最初阶段向我展示了同样的情况。我在div.a120顶部使用了一个浮动菜单，宽度为1004px并且出乎意料，我意识到Chrome对div.a120做了这个：

| -1px border -1002px div width - 1px border- |

和= 1004px !!!!

这是正常行为还是我错了？

当你使用表而不是带有display：table的div时，行为显然是一个表，但是当我使用display：table不应该只是一个带有表vew的div，或者它变成一个表？

提前致谢。

一个简短的例子（改变橙色面板的宽度，你会看到它如何覆盖黑色边框）：

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

Answer 1

如果你说显示为一个普通类型，它不应该有一些混合的继承融合，它应该拿起该类型的显示属性;在您的情况下，表格的边界宽度包含属性与div。

表格包括Chrome中总数的边框宽度，而不包括不包含的div。

这是使用您的代码（严格的doctype），标准表和显示为div的表的测试。您可以通过以下方式查看边框宽度包含差异：

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

div显示时Chromebox模型错误：表格！

1 个答案: