css中宽度定义为100px，但实际显示的是150px呢？

Question

#elem {
    width:100px;
    height: 100px;
    border:1px solid;
}

<div id="elem"></div>

如上所示，只是简单的设置宽度和高度，但实际在网页显示时，用qq截图软件截图时发现它的宽度和高度都是150多，这是为什么？

我使用的是chrome浏览器，浏览器并没有缩放，有人帮忙测试下吗？

Answer 1

有可能是你win10系统用了125%的缩放，调回100%就正常了

Answer 2

看下你的浏览器是不是放大了。

Answer 3

百度知道的回答：
px单位是以屏幕的分辨率为基准的，但如果浏览器使用了缩放功能，则显示的效果就会与实际像素不符。另外，手机浏览器是以“视口”（viewport）作为屏幕基准的（否则的话由于手机屏幕的尺寸众多，如果以物理尺寸为基准，同一个网页在不同的手机就会有千差万别的表现），这也会造成px与实际像素不符。

CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport

https://github.com/jawil/blog...

Answer 4

Ctrl+Shift+C 鼠标移到元素查看是不是150*150

Answer 5

用控制台看看，到底实际宽高是多少

Answer 6

这个每个浏览器缩放不一样啊Edge的100%就比Chrome大, 用开发者工具看是100PX就没错了

Answer 7

应该用控制台看，截图软件并不精确的。