好的，我有 10 个 div，它们应该都是 75px 宽，1px 边框使它们宽 77px。
我试图将 row1 的宽度设置为容纳 10 个框所需的最小宽度。
我的数学计算如下
- 77 像素 * 10 = 770 像素
- 2px 右边距 * 9 = 18px
- 总共788px
然而，当设置宽度为 788px 时，最后一个框会溢出。进一步检查后，我注意到使用开发者工具时框的宽度在 77px(3 倍)和 78px(7 倍)之间变化。
为什么盒子的大小不一样，因为这会打乱我的数学。我使用的是 Chrome，代码在 IE 中运行良好。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<script type="text/javascript" src="js/control.js"></script>
</head>
<body>
<div class="board">
<div class="row1">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</body>
</html>
CSS
.body { font: 12px "helvetica neue", helvetica;
}
.board {
background: #EBEBE0;
padding: 10px;
width: 808px;
}
.row1 {
background: #FFDCDC;
height: 52px;
padding: 10px;
width: 788px;
}
.box {
width: 75px;
height: 50px;
border: 1px solid #000;
float: left;
margin: 0 2px 2px 0;
}
div.box:last-child {
margin-right: 0;
}
最佳答案
我也无法重现问题...
我已经复制并粘贴了您的代码，我觉得还不错。
您是否尝试创建一个空白文档 (.html) 并粘贴您在此处放置的代码以检查是否也出现此问题？
另一个问题是:javascript文件里有什么？它不能改变你的风格吗？可能类似于 $(div).css('margin', '10px')(仅举个例子)。
关于html - Chrome 显示不同的宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21430775/