display:table在chrome与firefox中差异

Question

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 使得高度不会发生缩水现象？

Answer 1

chrome测试了一下未复现你的问题