Chrome 使用缩放渲染 table 时出现错误

Question

我的最低工作示例代码非常简单：

<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 个这样的单元格并且如果您希望每个单元格边框恰好占据 25px，则会导致看起来非常奇怪的单元格边框。

这不会发生在 Internet Explorer 中。我可以通过使用恰好可以被 10、3 和 4 整除的宽度来规避它，例如60.但是60太宽了

关于这个问题有什么建议吗？

Answer 1

我学到的一件事是，如果你想要响应式的东西，你想使用 %。如果我使用 1% 的宽度，它总是给我 24px

因此，将宽度为 25px 的每个 td 更改为 1%，您将始终拥有 24px。

另外最好给 td 一个 class 并使用 CSS 这样更干净。

希望对您有所帮助

塞斯

Answer 2

基于 Gecko 或 Trident 的浏览器不会出现该问题。然而，根据 Chromium 开发团队，这似乎是 Chrome 中的 "working as intended"，至少该错误的状态为 WONTFIX：https://bugs.chromium.org/p/chromium/issues/detail?id=717469

如果您认为他们应该解决此问题，请随时在错误报告中发表评论。

Chrome 使用缩放渲染 table 时出现错误

Chrome bug when rendering table with zoom

html

google-chrome

zooming