【发布时间】：2010-12-06 18:10:40
【问题描述】：
我用简单的说明创建了一个网站，比如说：
<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 边框 -1002px div 宽度- 1px 边框-|
sum=1004px!!!!
这是正常行为还是我错了？
当您使用 table 而不是带有 display: table 的 div 时，行为显然是一个 table，但是当我使用 display:table 时不应该只是一个带有 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>
【问题讨论】：
-
为我工作 - 你能发布一个完整的测试用例吗？
-
您是否尝试使用正确的文档类型？
-
好的，我要给大家完整的介绍...
-
两天来我一直在为这个问题而苦恼。我终于发现这可能是没有解决方案的事情。问题是当我应用样式显示：表时。当你有一个你知道在每个浏览器中应该出现一个 1004 像素宽度的 div 和一个 1 像素宽度的边界线。当您应用 display: table 时，div 会扩展其高度以与内容保持一致，然后 chrome 会改变它查看 div 的方式。是一个 1002 像素宽度和 1 像素边框的 div。我用更简单的代码替换了原始代码。
标签： google-chrome css