Chrome渲染带缩放表格时的错误

Question

Chrome渲染带缩放表格时的错误

3

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

<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”元素的宽度，应该是25像素。

现在缩放到110%，125%或类似的程度。

再次检查任意一个“td”元素的宽度，你会发现它不是25像素，而是类似于24.667像素、24.800像素... 或者是25.200像素、25.333像素等等，这取决于你选择的td元素。

如果你有超过两列，你可以看到一个规律：前一半的td元素渲染得太大了，而后一半的td元素渲染得太小了，如果你期望它们每一个都占据25像素，那么这种情况就会累积，并且使单元格边框看起来非常奇怪。

这种情况在Internet Explorer中不会发生。我可以通过使用能够被10、3和4整除的宽度来规避这个问题，例如60。但是60太宽了。

对此问题有什么建议吗？

- Alexander

2个回答

-1

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

所以，将所有宽度为25px的td更改为1%，你将始终拥有24px。

此外，最好给td添加类，并使用CSS来进行设置，这样更加简洁。

希望这可以帮助您。

Cees

- Cees

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alexander · Accepted Answer

这个问题在基于Gecko或Trident的浏览器中不会出现。然而，根据Chromium开发团队的说法，在Chrome中这似乎是“按照意图工作的”，至少该错误的状态为WONTFIX：https://bugs.chromium.org/p/chromium/issues/detail?id=717469。如果您认为他们应该修复此问题，请在错误报告中留下评论。