为什么Chrome浏览器会更改边框尺寸并且未将其设置为我所请求的尺寸？

我想了解为什么边框的大小不是我用CSS规则设置的大小。这是a fiddle这里是HTML：为什么Chrome浏览器会更改边框尺寸并且未将其设置为我所请求的尺寸？

<!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的“问题”是什么？

来源

2015-11-01 p.matsinopoulos

什么浏览器，你看到这种情况发生？它是否跨越多个？我检查了Firefox 41和Safari 8，我无法复制它。 – justinw

它在Chrome版本46.0.2490.80 m和Firefox 41.0.2中没有任何问题。 – Alex

嗯。你对Firefox的说法是对的。我会更新我的问题 –

这是一个愚蠢的错误，这是不明显的。但我想在这里发布正确的答案/解决方案，以便为其他可能出现相同情况的人节省时间。

问题在于我的Chrome浏览器的缩放级别。这是在90％（这是不容易确定），并使Chrome重新计算使用缩放比例的大小。

当我将缩放重置为100％时，在开发人员工具箱模型上显示的边框大小正确。

整个故事真的很让人困惑。因为其他属性是正确的。只有边界不正确。

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

来源

2015-11-02 07:16:06

-2

我认为你必须检查CSS语法以及

border: solid 3px #f5eabe;

来源

2015-11-01 16:21:49

这是一条评论，而不是答案。 – Alex

或者你也可以在样式标签里设置css属性 –

–

为什么Chrome浏览器会更改边框尺寸并且未将其设置为我所请求的尺寸？

回答

相关问题