Chrome 中奇怪的表格像素错误 [英] Weird table pixel bug in Chrome

问题描述

我在 Google Chrome(不是 Firefox)中遇到奇怪的像素差异.请参阅上图或运行下面的代码片段.

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

我努力删除任何不需要的部分.

 * {保证金:0;填充:0;}#wrapper1 {填充顶部:5mm；背景:浅蓝色；}#wrapper2 {显示:弹性；弹性方向:列；背景:浅灰色；}桌子 {边框折叠:折叠；边框:1px纯红色；边距顶部:7mm；}td, .box {宽度:12mm；高度:12mm；}TD{背景:灰色；}.盒子 {背景:橙色；}

<div id="wrapper2"><表格><tr><td><div class="box"></div></td><td></td></tr>

解决方案

mm 单位不会转换为整数像素.例如，12mm 是 45.354330709px.不幸的是，由于没有提供CSS规范 应该如何做.

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

* {保证金:0;填充:0;}#wrapper1 {填充顶部:5mm；背景:浅蓝色；}#wrapper2 {显示:弹性；弹性方向:列；背景:浅灰色；}桌子 {边框折叠:折叠；边框:1px纯红色；边距顶部:70px;}td, .box {宽度:120px；高度:120px；}TD{背景:灰色；}.盒子 {背景:橙色；}

<div id="wrapper2"><表格><tr><td><div class="box"></div></td><td></td></tr>

I am encountering strange pixel discrepancy in Google Chrome (not Firefox). See above image or run the code snippet below.

In red border can be seen the table. Orange: div in td. Grey: td. I expect both to have the same height. Why dont they? The left one is half a pixel bigger. If you zoom it with Chrome, the difference resolves. Is this some kind of bug in Chrome? Do I have to use px as a measurement instead? I do not want to, since I am rendering a to-be-printed page here.

I tried hard to remove any unnecessary parts.

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

解决方案

mm units do not convert into a whole number of pixels. For example, 12mm is 45.354330709px. Unfortunately, browsers handle rounding differently since no CSS spec is provided for how it should be done.

As an example, I have converted your mm units to use px. I scaled it up/down by a factor of 10 and no longer see a difference in where the borders are placed.

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

这篇关于Chrome 中奇怪的表格像素错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！