我的最低工作示例代码非常简单:
<body>
<table border="0" cellspacing="0" cellpadding="0" style="width: 50px; ">
<thead>
<tr>
<td style="width: 25px;" headerindex="0">
<div>00</div>
</td>
<td style="width: 25px;" headerindex="1">
<div>15</div>
</td>
</tr>
</thead>
</table>
</body>
请在 Chrome 中以 100% 缩放比例打开以下 JSfiddle:https://jsfiddle.net/kghq1hs2/
检查任何“td”元素的宽度。它应该是 25px。
现在缩放到 110%、125% 或任何类似的比例。
再次检查任何“td”元素的宽度，发现它不是 25px，而是类似于 24.667px、24.800px... 或 25.200px、25.333px... ，取决于您选择的 td。
如果你有超过两列，你可以看到一个模式:tds 的前半部分渲染得太大，而后半部分渲染得太小，如果你有大约 100 个这样的单元格，它就会累积起来，使得非常奇怪的单元格边框，如果您希望它们每个正好占据 25 像素。
这不会发生在 Internet Explorer 中。我可以通过使用恰好可以被 10、3 和 4 整除的宽度来规避它，例如60. 但是 60 太宽了。
关于这个问题有什么建议吗？
最佳答案
此问题不会出现在基于 Gecko 或 Trident 的浏览器中。然而，根据 Chromium 开发团队的说法，这似乎在 Chrome 中“按预期工作”，至少该错误的状态为 WONTFIX:https://bugs.chromium.org/p/chromium/issues/detail?id=717469
如果您认为他们应该解决此问题，请随时在错误报告中发表评论。
关于html - 使用缩放渲染表格时出现 Chrome 错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34268867/