Question

我注意到在我的浏览器扩展中使用标尺工具时（我尝试了多次），像素规格通常会短2个像素。在我正在研究的网站上注意到这一点之后，我尝试了一个非常简单的html页面，其中div指定了宽度和高度为200px且没有边框或填充。之后在多个浏览器和各种标尺工具中测量它，实际渲染的框的宽度和高度都比我的css低2个像素。

所以，好奇为什么会这样。是什么促成了盒子的“物理”尺寸，屏幕分辨率呢？如果它真的是这样的话，那就不是世界末日，看它看起来是一致的事情。

修改

根据评论和回复，我的代码非常简单：

<html>
 <body>
  <div style="width: 200px; height: 200px;background: red"></div>
 </body>
</html>

我正在从外到外进行测量。像这里：

Answer 1

如果您使用光标绘制的框在内正在测量的框中，它将比您用于测量的框在外开始时小2个像素>你正在测量的盒子。

这是一个小图：

Answer 2

最好是使用reset css来忽略这样的问题

http://yuilibrary.com/yui/docs/cssreset/

Answer 3

我刚刚用上面编写的（免费软件）像素标尺测量了上面方框的高度，用于Windows的标尺，它的测量结果很好，只有200像素。

我对你的红色大盒子里的盒子感到有些困惑，但是如果你把勃艮第边界算作需要测量的一部分，那么内盒测量宽度为50。

值得注意的是，对于Windows的标尺（当它是水平的）时，标尺左边缘的线计为像素1，如果标尺设置为（例如）200的长度，则线条开启标尺的右边缘计为像素200.

换句话说，如果你测量的东西，例如3像素宽，你会看到左边的1个像素开始标尺，中间只有一个像素，最后右边有一个像素结束尺子。

这样做可以将标尺移动到屏幕的两个边缘，并计算边缘上的像素。

你看起来很害羞的两个像素是否可能是标尺两端的两个1像素宽度？

参考：www.arulerforwindows.com

Answer 4

我正在将此归结为浏览器的怪异。截取页面截图并在photoshop中进行比较，它们排列完美。

像素精度偏2像素

4 个答案: