容器为什么会失去10px的高度？

Question

我有以下代码，它基本上是一个有宽度的容器，然后用正方形填充，所以有相同数量的正方形和向下：

top -b -d 5 -n 2 | awk '$1 == "PID" {block_num++; next} block_num == 2 {sum += $9;} END {print sum}'

var container = $('.container'),
    numberOfSquares = 25,
    squareSize = container.width() / numberOfSquares;

for (var squares = 0; squares < numberOfSquares * numberOfSquares; squares++) {
    $('<div class="gridSquare"></div>').appendTo(container);
}

$('.gridSquare').css({
    "height": squareSize + "px",
    "width": squareSize + "px"
});

.container {
    width: 960px;
}
.gridSquare {
    background-color: black;
    display: inline-block;
    vertical-align: top;
}

我的问题是为什么<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"></div>失去10px的高度（如果你检查元素只有950px高），即使里面的方块是正方形，垂直和水平方向的数字相等而且行填充完整的960px？

我刚检查过，这似乎只发生在chrome

中

Answer 1

因为你只能以全像素绘制。每个方块的高度从38.4px下降到38px。 25 * 38px = 950px。