Chrome框模型是错误的div显示：表！ [英] 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的像素宽度为1004像素。
*back.jpg is 1004 pixels wide.
然后疯狂的事情：
IE8，FF35，Opera9，他们都显示div.a120背景宽度1004px匹配的div的宽度并且每边都有1像素的边框。
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，显示我相同，至少在最初。
我在div.a120顶部使用浮动菜单，宽度为1004px，惊喜，我意识到Chrome对div.a120做了这样的操作：
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- |
|-1px border -1002px div width- 1px border-|
sum = 1004px !!!!
sum=1004px!!!!
这是一个正常的行为还是我错了？
Is this a normal behaviour or am I wrong?
当你使用表而不是一个div与display：table的行为显然是一个表，但是当我使用display：table不应该只是一个div与表vew或它成为一个表？
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?
提前感谢。
一个简短的例子（改变橙色面板的宽度，你会看到它如何覆盖黑色边框）：
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>
推荐答案
如果将显示视为常见类型，没有继承的一些混合融合，它应该拾取类型的显示属性;在您的情况下，表格的边界宽度包含属性与div。
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.
表格包括Chrome中的总边框宽度，而不是div 。
Tables include the border width in the total in Chrome as opposed to a div which doesn't.
这里是一个测试你的代码（严格doctype），一个标准表和一个表显示为div。您可以通过这种方式查看边框宽度包含差异：
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>
这篇关于Chrome框模型是错误的div显示：表！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
