如何以编程方式创建一个20x20px的单元格背景？

Question

我正在尝试建立一个浏览器窗口大小的网格，其中有20x20px的正方形。我的第一个想法是用下面的代码构造一个表，但是IE8 (在任何模式下)不会呈现单元格，除非它们包含非空白内容。根据this的说法，如果它有一个 ，它就会工作，但从我的测试来看，只有当表在原始DOM中-而不是javascript中时，它才能工作。

dojo.ready(function(){
    var grid = dojo.byId("grid");
    var tr;
    for(var i=0; i<20; i++) {
        tr = dojo.create("tr", null, grid);
        for(var j=0; j<20; j++) {
            var td =dojo.create("td", {innerHTML: "&nbsp;"}, tr);
            dojo.style(td, {border: "solid", height: "20px", width: "20px"});
        }
    }
});
...
<table id="grid" style="border-collapse: collapse;"></table>

在放弃这种方法后，我决定尝试google-closure的矢量图形库--我认为矢量绘图在原则上是更合适的解决方案，因为表格不是用来做这个的。我让它跨浏览器工作，但对于一个相当大的网格(比如1000x1000)来说，加载时间和内存利用率是令人难以置信的。我想它也不是为此而设计的：

var graphics = goog.graphics.createGraphics(800, 800);
var path, stroke = new goog.graphics.Stroke(1, "gray");

for(var x=0; x<65; x++) {
 for(var y=0; y<65; y++) {
     path = new goog.graphics.Path();
     path.moveTo(0, y*20);
     path.lineTo(800, y*20);
     graphics.drawPath(path, stroke);

     path = new goog.graphics.Path();
     path.moveTo(x*20, 0);
     path.lineTo(x*20, 800);
     graphics.drawPath(path, stroke);
 }
}

graphics.render(document.byId("grid"));
...

也许实用的解决方案是创建一个20x20px的图像，然后重复插入它？

Answer 1

它一定要以编程的方式进行吗？因为使用20x20像素的GIF作为背景图像，在右边和底部有一条线，你可以在五分钟内完成。它是跨浏览器的，也可以在很大的区域工作。

编辑:你已经在你的问题末尾有了这个想法。是的，我认为这是最简单的方法。

Answer 2

有时候我会用困难的方式做事情...

body {background-image: url(grid-cell.png); background-repeat: repeat;}

^^

Answer 3

我不确定当您动态创建表时，dojo库是否修复了IE的特定问题，但如果不是，您将需要在添加行之前添加一个TBODY标记，否则IE将无法正确呈现该表。