jqGrid 中的垂直填充从何而来？

Question

在 chrome 中使用带有内联编辑的 jqGrid 时，我注意到一个奇怪的错误。选择行，垂直填充每次由像素或两两个增长。我不确定是什么原因造成的，但我设法将其浓缩为一个简化的示例：

http://jsfiddle.net/3mrKD/

更新：没有 jqGrid 的更简单的版本：http://jsfiddle.net/3mrKD/9/

如果在两行之间来回点击，可以让每一行的高度无限增长。 Chrome 的检查器将多余的空间显示为填充，但大小与指标检查器的值不匹配。

我可以在适用于 Windows 和 Mac 的最新版 Chrome (26.0.1410.64 m) 上可靠地重现这一点，但不能在任何版本的 Firefox、IE 9 或 10 或 Safari 上重现。

这看起来像是我正在使用的某个库中的错误吗？在 Chrome 中？

HTML：

<table id="grid"></table>

CSS：

td { vertical-align: baseline; }

JavaScript：

var lastSelected;

$("#grid").jqGrid({
    datatype: "local",
    data: [{ id: 1, name: "Alice" }, { id: 2, name: "Bob" }],
    colModel: [
        {
            name: 'id'
        },
        {
            name: 'name',
            editable: true
        }
    ],
    onSelectRow: function(id) {
        if (id && id !== lastSelected) {
            $("#grid").jqGrid('restoreRow', lastSelected);
            $("#grid").jqGrid('editRow', id, true);
            lastSelected = id;
        }
    },
});

Answer 1

这是一个有趣的问题。我想这是 Google Chrome 中的一个错误：它以错误的方式计算 <td> 的高度。为了减少问题，我建议在行编辑开始时将vertical-align 重置为middle。它将包括<td> 的附加style="vertical-align:middle" 属性。在编辑结束时可以删除该属性。

可以在the modified demo 上查看结果。该演示在开始编辑时仍然将行高增加到1px，但我认为在使用其他CSS属性后可以消除效果。演示中使用的代码如下

var lastSelected,
    removeVerticalAlignBaseline = function (rowid) {
        var tr = $(this).jqGrid("getInd", rowid, true),
            $tds = $(tr).find(">td:has(>input)");
        $(tr).find(">td:has(>input)").each(function () {
            this.style.verticalAlign = "middle";
        });
    },
    resetVerticalAlignBaseline = function (rowid) {
        var tr = $(this).jqGrid("getInd", rowid, true),
            $tds = $(tr).find(">td");
        $(tr).find(">td:has(>input)").each(function () {
            this.style.verticalAlign = ""; // remove the style
            // now the style from CSS will be used
        });
    },
    editOptions = {
        keys: true,
        oneditfunc: removeVerticalAlignBaseline,
        aftersavefunc: resetVerticalAlignBaseline,
        afterrestorefunc: resetVerticalAlignBaseline,
    };

$("#grid").jqGrid({
    datatype: "local",
    data: [{ id: 1, name: "Alice" }, { id: 2, name: "Bob" }],
    colModel: [
        { name: 'id' },
        { name: 'name', editable: true }
    ],
    onSelectRow: function(id) {
        if (id && id !== lastSelected) {
            $(this).jqGrid('restoreRow', lastSelected, editOptions);
            $(this).jqGrid('editRow', id, editOptions);
            lastSelected = id;
        }
    },
    height: "auto"
});

Answer 2

原来这是bug in chrome（和in webkit）。我最终使用的修复程序（链接的错误中还有其他建议）是：

div.ui-jqgrid td {
    vertical-align: middle;
}

我之前的 vertical-align 声明来自一般的 CSS 重置，所以我在有问题的地方覆盖了它。