设置的画布高度自己缩短了是什么情况

<div class="cont">
<div class="col-md-3" id="criterion">
<canvas id="areaUpper1"></canvas>
</div>
<div class="col-md-6">
<canvas id="areaUpper2"></canvas>
</div>
<div class="col-md-3">
<canvas id="areaUpper3"></canvas>
</div>
</div>
<div class="cont">
<div class="col-md-3">
<canvas id="areaLower1"></canvas>
</div>
<div class="col-md-3">
<canvas id="areaLower2"></canvas>
</div>
<div class="col-md-3">
<canvas id="areaLower3"></canvas>
</div>
<div class="col-md-3">
<canvas id="areaLower4"></canvas>
</div>
</div>
页面是按这样来布局的
function set(id){//设置画布的宽高
canvas = document.getElementById(id);
canvas.width=document.getElementById('criterion').offsetWidth;
canvas.height=document.getElementById('criterion').offsetHeight;
console.log(document.getElementById('criterion').offsetHeight)//这个取出来的值都是一样的
return canvas;
};
但是页面上最后那三个的高度就是缺了几个px，我实在是想不懂为什么
在ie浏览器上面就没问题，在chrom上面就这样，是浏览器的原因吗

这个是谷歌浏览器上面的样子最低端少了一截
在ie上面就是正常的情况