Chrome中奇怪的表格像素错误

Question

我在 Google Chrome（不是 Firefox）中遇到奇怪的像素差异。请参见上图或运行下面的代码 sn-p。

在红色边框可以看到表格。橙色：td 中的 div。灰色：td。我希望两者具有相同的高度。他们为什么不呢？左边的大半个像素。如果你用 Chrome 缩放它，差异就会解决。这是 Chrome 中的某种错误吗？我是否必须使用 px 作为度量值？我不想，因为我在这里渲染一个要打印的页面。

我努力删除了所有不必要的部分。

  * {
    margin:0;
    padding:0;
  }
  #wrapper1 {
    padding-top: 5mm;
    background:lightblue;
   }
   #wrapper2 {
    display: flex;
    flex-direction: column;
    background:lightgrey;
  }
   table {
    border-collapse: collapse;
    border: 1px solid red;
    margin-top:7mm;
   } 
   td, .box {
    width:12mm;
    height:12mm;
   }
   td {
    background:grey;
   }
   .box {
    background:orange;
   }

<div id="wrapper1">
   <div id="wrapper2">
      <table>
            <tr>
               <td>
                  <div  class="box"></div>
               </td>
               <td></td>
            </tr>
      </table>
   </div>
</div>

Answer 1

mm 单位不会转换为整数像素。例如，12mm 是 45.354330709px。不幸的是，自 no CSS spec is provided 以来，浏览器处理舍入的方式有所不同。

例如，我已将您的 mm 单位转换为使用 px。我将其放大/缩小了 10 倍，并且不再看到边框放置位置的差异。

* {
  margin:0;
  padding:0;
}
#wrapper1 {
  padding-top: 5mm;
  background:lightblue;
}
#wrapper2 {
  display: flex;
  flex-direction: column;
  background:lightgrey;
}
table {
  border-collapse: collapse;
  border: 1px solid red;
  margin-top:70px;
} 
td, .box {
  width:120px;
  height:120px;
}
td {
  background:grey;
}
.box {
  background:orange;
}

<div id="wrapper1">
   <div id="wrapper2">
      <table>
            <tr>
               <td>
                  <div  class="box"></div>
               </td>
               <td></td>
            </tr>
      </table>
   </div>
</div>