javascript - 奇怪的进度条行为 offsetwidth

Question

我开始使用 vanilla JavaScript 开发一个简单的进度条。至于在 CSS 中设置宽度，我发现 JS 的唯一方法是使用.offsetWidth- 以下是我开始设置的功能演示的代码。小提琴链接位于问题的底部。

HTML：

<section id="box"></section>
<p>
<section id="box2"></section>

CSS：

#box, #box2 {
height: 10px;
width: 5px;
background-color: lightBlue;
}
#box2 {
width: 4px;
}

JavaScript（加载）：

var savedwidth = document.getElementById("box").offsetWidth;
alert("box 1 width " + savedwidth);
savedwidth = document.getElementById("box2").offsetWidth;
alert("box 2 width " + savedwidth);

在测试它以查看它是否准确地抓住了属性时，我注意到当宽度设置为5px它时返回6px。其他一切似乎都很好。4 像素 = 4 像素，6 像素 = 6 像素。

我很好奇是否有人知道为什么会这样？它足够小，不会影响我正在尝试做的事情，但你知道的越多，你就会越好。

小提琴：http : //jsfiddle.net/5yk9e5du/