毫米并不总是一样的

Question

我需要绘制背景网格并在该网格上放置div。 Div边缘必须与网格对齐。所有位置和dimmensions必须以毫米计算。不幸的是，div与网格有一些偏差，没有对齐。

我甚至尝试过背景网格图像而不是在css中绘制网格 - 没有帮助。 （在谷歌浏览器中测试小提琴）

http://jsfiddle.net/amqu1zrb/

HTML：

<div class="bg">
    <div class="widget widget1"></div>
    <div class="widget widget2"></div>
    <div class="widget widget3"></div>
</div>  

的CSS：

body {
    margin: 0;
    padding: 0;    
}

.bg {
    margin: 0;
    padding: 0;
    width: 100mm;
    height: 100mm;
    background-image: 
        linear-gradient(lightgray 1px, transparent 1px), 
        linear-gradient(90deg, lightgray 1px, transparent 1px); 
    background-size: 5mm 5mm;
    position: relative;
}

.widget {
    width: 10mm;
    height: 10mm;
    background-color: red;
    position: absolute;
    display: block;
    opacity: 0.4;
    filter: alpha(opacity=40);
}

.widget1 {
    top: 5mm;
    left: 5mm;
}

.widget2 {
    top: 35mm;
    left: 55mm;
}

.widget3 {
    top: 45mm;
    left: 85mm;
}

如何准确地将div与网格对齐？