我最近一直在处理某种绘图网格，并使用了边框间距。

HTML:
<table id="table"></table>
    <script>
        var res = 16;
        var cell_size = 8;
        var table = document.getElementById("table");
        var border_size = parseInt(window.getcomputedStyle(table).getPropertyValue("border-spacing"),10);

        table.style.width = (cell_size + border_size) * res + border_size + "px";
        table.style.height = (cell_size + border_size) * res + border_size + "px";

        for(y=0;y<res;y++){
            var row = table.insertRow();
            for(x=0;x<res;x++){
                row.insertCell();
            }
        }
    </script>


CSS:
table{
    background: #000000;
    border-spacing: 1px;
}
td{
    padding: 0;
    background: #c9c9c9;
}

想法是要形成一个表格，其中包含固定数量的具有预定大小和边框间距的单元格。

var res = 16;
var cell_size = 8;
var border_size = parseInt(window.getcomputedStyle(table).getPropertyValue("border-spacing"),10);

然后根据这些参数计算整个表的大小。

table.style.width = (cell_size + border_size) * res + border_size + "px";
table.style.height = (cell_size + border_size) * res + border_size + "px";

最后，表格是通过嵌套循环创建的。

for(y=0;y<res;y++){
    var row = table.insertRow();
    for(x=0;x<res;x++){
        row.insertCell();
    }
}

如果我使用较小的边框尺寸（

-webkit-border-horizontal-spacing
-webkit-border-vertical-spacing

但是我不能像这样更改它们：

-webkit-border-horizontal-spacing: 1px;
-webkit-border-vertical-spacing: 1px;

计算值仍将保持在0.8像素。结束时并不多，但确实让我感到困扰。这种行为是否有任何原因，并且有可能具有如此低的值的精确像元大小？

以下是一个小提琴示例：https://jsfiddle.net/kdqoc4vy/1/

请注意，cell_size应该恰好为20px，但实际上为19.2。

P.S。有了Edge，一切都可以正常工作。当表很小时，这个0.8px几乎为零，但是当它有64行和列时，这种不一致成为一个问题。预先感谢您的答复！