为什么 Chrome 浏览器更改了边框大小，但没有将其设置为我要求的大小？

Question

我想了解为什么边框大小与我使用 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 Yosemite 上使用 Chrome Version 46.0.2490.80 (64-bit)。 Chrome 检查确实出现了这个问题。当我使用 Firefox (Version 41.0.2) 时，边框正确显示，大小为 3。 Safari 也是如此 (Version 9.0 (10601.1.56.2))。它显示尺寸 3。

那么，"problem" 和 Chrome 是什么？

Answer 1

我认为你必须好好检查 css 语法

border: solid 3px #f5eabe;

Answer 2

这是一个根本不明显的愚蠢错误。但是我想在这里 post 正确 answer/solution 这个问题，以便为可能遇到相同情况的其他人节省一些时间。

问题是我的 Chrome 浏览器的缩放级别。它处于 90%（不容易识别），这使得 Chrome 使用缩放比例重新计算尺寸。

当我将缩放比例重置为 100% 时，开发者工具框模型上显示的边框大小正确。

整个故事真是扑朔迷离。因为其他属性是正确的。只有边框不正确。

我在这上面花了很多时间。希望下一个不会。

为什么 Chrome 浏览器更改了边框大小，但没有将其设置为我要求的大小？

Why does Chrome browser change the border size and does not set it to the one that I am requesting?

css

google-chrome

google-chrome-devtools