display:table在chrome與firefox中差異

display:table樣式在不同瀏覽器中，造成了幾個像素的偏差。
css:

    .tbodyContent span{
        text-align: center;
        display: table-cell;
        vertical-align: middle;
    }
    .tbodyContent>div{
        display: table;
    }
    .trDiv:nth-child(even){
      height: 145px;
      width: 1080px;
      background-color:#B6D7A8
    }
    .trDiv:nth-child(odd){
      height: 145px;
      width: 1080px;
      background-color:#7F6000
    }

html:

<div class="tbody" style="height:580px;">
        <div class="tbodyContent" style="height: 100%;">
            <div class="trDiv">
              <span style="width: 15%;">1</span>
              <span style="width: 40%;">2</span>
              <span style="width: 30%;">3</span>
              <span style="width: 15%;">4</span>
            </div>
            <div class="trDiv">
              <span style="width: 15%;">1</span>
              <span style="width: 40%;">2</span>
              <span style="width: 30%;">3</span>
              <span style="width: 15%;">4</span>
            </div>
            <div class="trDiv">
              <span style="width: 15%;">1</span>
              <span style="width: 40%;">2</span>
              <span style="width: 30%;">3</span>
              <span style="width: 15%;">4</span>
            </div>
            <div class="trDiv">
              <span style="width: 15%;">1</span>
              <span style="width: 40%;">2</span>
              <span style="width: 30%;">3</span>
              <span style="width: 15%;">4</span>
            </div>
        </div>
    </div>

同樣一段代碼在chrome 66 版本中：

如上圖所示，高度并不是145px，而是144px

在firefox中:

如上圖所示，高度與樣式中145px一致。

請問如何操作chrome 使得高度不會發(fā)生縮水現(xiàn)象？