我试图理解为什么边框大小不完全是我用CSS规则设置的大小。这里是a fiddle，这里是HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>P inside Body</title>
<link rel="stylesheet" href="stylesheets/working.css">
</head>
<body>
<h2>Hello World!</h2>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem
sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non
numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam,
quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum
fugiat quo voluptas nulla pariatur?
</p>
</body>
</html>下面是CSS文件：
body {
background-color: antiquewhite;
border: 10px solid black;
padding: 10px 20px 30px 40px;
margin: 10px 10px;
box-sizing: border-box;
color: darkblue;
}
p {
width: 400px;
padding: 10px 10px;
border: 3px solid red;
box-sizing: inherit;
}当我检查<p>元素时，我看到边界大小不完全是3px，而是2.222。
有线索吗？
编辑/更新
我在Mac OS X约塞米蒂上使用Chrome Version 46.0.2490.80 (64-bit)。确实，Chrome检查出现了问题。当我使用Firefox（Version 41.0.2）时，边框正确显示为大小3。Safari（Version 9.0 (10601.1.56.2)）也是如此。它显示大小3。
Chrome的“问题”是什么？
3条答案
按热度按时间jfgube3f1#
这是一个愚蠢的错误，并不明显。但我想在这里张贴正确的答案/解决这个问题，以保存时间，为其他人可能会遇到同样的情况。
问题是我的Chrome浏览器的缩放级别。它是90%（这不容易识别），这使得Chrome使用缩放比例重新计算大小。
当我将缩放比例重新设置为100%时，边框在开发人员工具箱模型上显示为正确的大小。
整个故事真的很混乱。因为其他的属性都是正确的。只有边框不正确。
我在这上面花了很多时间，希望下一个不会。
6ie5vjzr2#
只是想添加到现有的答案。在我的情况下浏览器（Google Chrome版本111.0.5563.111官方构建64位）具有100%缩放级别，但边框在devtool中仍然有不同的大小（而在Microsoft Edge中它具有相同的大小）。我使用的是Windows 10 64位。原因是，在我的Windows显示设置中，“比例和布局”是125%（虽然它是“推荐”比例）。将其更改为100%将解决这个问题，但我所有应用程序的字体大小都太小了。也许Google Chrome无法从Windows读取此设置，而Microsoft Edge可以。
6yt4nkrj3#
我认为你必须检查好CSS语法