Question

我在使用jqGrid和chrome中的内联编辑时发现了一个奇怪的错误。选择行时，垂直填充每次增长一个像素或两个像素。我不确定是什么导致了这一点，但我已经设法将其简化为一个简化的例子：

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

如果在两行之间来回点击，则可以使每行的高度无限增长。 Chrome的检查器将额外空间显示为填充，但大小与度量检查器值不匹配。

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

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

table cell with extra vertical padding

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。它将包含style="vertical-align:middle"的其他<td>属性。在编辑结束时，可以删除该属性。

可以在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;
}

我之前的垂直对齐声明来自一般的CSS重置，所以我在它出现问题时将其覆盖。

jqGrid中的这个垂直填充来自哪里？

2 个答案: