Chrome中

Question

我在谷歌浏览器中遇到奇怪的像素差异（不是 Firefox）。请参阅上面的图片或运行下面的代码段。

在红色边框中可以看到表格。橙色：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倍，并且不再看到边框放置位置的差异。

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;