jquery-plugins - chrome浏览器的jqgrid卡住列问题

Question

嗨，我在 chrome(v22) 和 firefox 之间的 jqgrid 卡住列演示中看到对齐差异。任何机构都可以告诉我为什么会发生这种情况以及解决方法是什么。



如果您查看屏幕截图，您会看到 client 列和 Amount 列之间的一些水平对齐差异。

你可以在下面的链接中看到同样的内容:
http://www.trirand.com/blog/jqgrid/jqgrid.html

打开上面的链接并转到最后一部分，即卡住的 cols 组标题。然后在 windows XP 的 chrome(v22) 浏览器中选择卡住列演示或卡住列组标题演示。

但是在 windows XP 中的 firefox(v 15) 和 safari(v5) 中对齐是正确的

Answer 1

我不能建议你真正解决这个问题，但我决定写下我如何解释这个问题。简短的回答是:setFrozenColumns 中有一个错误。 top的计算方法卡住的 div 的位置。一个应该改进代码。

有两个 div:一个用于卡住标题(具有类 frozen-div ui-jqgrid-hdiv 的 div)和另一个用于卡住主体(具有类 frozen-bdiv ui-jqgrid-bdiv 的 div)。如果您从 the official jqGrid demo page 打开“Frozen Cols.Group Header(new)”/“Frozen column with group header” demo并检查 top 的值查看不同浏览器中的属性，您会发现在某些浏览器中 top 的值应该增加或减少到 1px 以获得正确的 View 。

例如在 Firefox 16 中，潜水有 top: 24px;和 top: 70px;一切看起来都不错。

在 IE9 中，有相同的值，但要正确查看网格，必须将值更改为 top: 25px;和 top: 71px;
以同样的方式，一个具有相同的值 top: 24px;和 top: 70px;在 Chrome 22 中。要解决这个问题，可以将值更改为 top: 23px;和 top: 69px;
您可以使用 Chrome 的开发者工具(IE 也一样)来验证 top 的更改。属性解决了这个问题:



更改后，演示的外观将完美至少 100%，但如果您将缩放更改为 200%，您将看到原始值 top: 24px;和 top: 70px;更好。

我想真正解决这个问题并不容易。它在网格的每行卡住部分和每行非卡住部分上设置高度属性的方向。在 the answer你会找到朝着这个方向迈出的第一步。缺点是需要额外的代码来在编辑后重新计算行的正确高度。