1

我最近一直在研究某种绘图网格并使用边框间距。

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();
    }
}

如果我使用小（<4px）边框尺寸，它似乎无法在 Chrome 中正常工作 - 单元格尺寸开始偏移 0.4 px 左右。在 Chrome 中，有 2 个计算出的 webkit 选项会影响这个偏移量：

-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。

PS With Edge evertyhing 可以正常工作。当表格很小时，这个 0.8px 几乎没有，但是当它有 64 行和列时，这种不一致就会成为问题。提前感谢您的回复！

4

0 回答 0