使用chrome浏览器的jqgrid冻结列问题

Question

您好我在chrome（v22）和firefox之间看到jqgrid冻结列演示中的对齐差异。任何人都可以告诉我它为什么会发生这种情况以及它的修复方法。

如果查看屏幕截图，您会看到客户端和Amount列之间存在一些水平对齐差异。

您可以在以下链接中看到相同内容： http://www.trirand.com/blog/jqgrid/jqgrid.html

打开上面的链接并转到最后一部分，即冻结cols组头。然后在Windows XP中的chrome（v22）浏览器中选择冻结列演示或冻结列组头演示。

但是在Windows XP中firefox（v 15）和safari（v5）中的对齐是正确的

Answer 1

我无法建议您真正解决问题，但我决定写下我如何解释问题。简短的回答是：setFrozenColumns方法在计算冻结div的top位置时存在错误。一个人应该改进代码。

有两个div：一个用于冻结的标题（div具有类frozen-div ui-jqgrid-hdiv），另一个用于冻结的主体（具有类frozen-bdiv ui-jqgrid-bdiv的div）。如果您从the official jqGrid demo page打开“Frozen Cols.Group Header（new）”/“Frozen group with group header”演示并检查不同Web浏览器中top属性的值，您会发现某些浏览器top的值应该增加或减少到1px才能获得正确的视图。

例如在Firefox 16中，潜水有top: 24px;和top: 70px;，所有看起来都很好。

在IE9中，一个具有相同的值，但要正确查看网格，必须将值更改为top: 25px;和top: 71px;

同样，Chrome 15中的值top: 24px;和top: 70px;也相同。要解决问题，可以将值更改为top: 23px;和top: 69px;

您可以使用Chrome的开发人员工具（以及与IE相同的工具）来验证更改top属性可以解决问题：

在更改之后，演示的外观将至少达到100％，但如果您将缩放更改为200％，您将看到原始值top: 24px;和{{ 1}}更好。

我认为问题的真正解决方案并不容易。它在网格的冻结部分的每个行以及非冻结部分的每一行上设置高度属性的方向。在the answer中，您会找到方向的第一步。缺点是在编辑后需要额外的代码来重新计算行的正确高度。

Answer 2

如果增加/减少字体大小，在所有浏览器中，对齐有时是正确的，有时是错误的。确实，只有在Chrome中，默认大小才会出错，而其他所有（Firefox，Opera，Safari，Internet Explorer）都是正确的，但是当您更改大小时，所有这些都可以调整/调整不当。而且不仅垂直对齐，而且其他东西也变得丑陋 - 比如冷冻柱和其余部分之间的水平空间，甚至它的垂直尺寸（当你增加或减少太多时会变得明显）。

检查DOM，你会发现它实际上呈现了两个表 - 一个是固定的，对于冻结的列，一个是可滚动的，其余的。它试图将它们看作是一个一致的东西，但最终它主要是一个黑客。至于修复，不幸的是我不知道，但由于这是一个比“在Chrome上不起作用”更普遍的问题，我希望插件开发者最终能够修复它。