jqgrid在Chrome浏览器上冻结列的问题

Question

jqgrid在Chrome浏览器上冻结列的问题

jquery-pluginsjqgrid

4

你好，我在Chrome（v22）和Firefox之间的jqgrid冻结列演示中看到了对齐差异。有人能告诉我为什么会发生这种情况以及如何修复吗？

enter image description here

如果您查看截图，您将看到客户端和金额列之间的水平对齐差异。

您可以在以下链接上实时查看相同内容： http://www.trirand.com/blog/jqgrid/jqgrid.html

打开以上链接并在Windows XP的Chrome（v22）浏览器中转到最后一节即冻结列组标题。然后选择冻结列演示或冻结列组标题演示。

但是，在Windows XP的Firefox（v15）和Safari（v5）中，对齐是正确的。

- Rohini Kumar

@Oleg，如果你有时间，能否请看一下这篇帖子？ - Rohini Kumar

2个回答

2

如果您在所有浏览器中增加/减小字体大小，则有时对齐方式会正确，有时会出错。的确，在默认大小下，只有在Chrome中表现不好，而所有其他浏览器（Firefox、Opera、Safari、Internet Explorer）都开始正确，但是当您更改大小时，它们都可以被调整/调整错误。不仅是垂直对齐，还有其他东西也变得难看 - 比如冻结列和其余部分之间的水平空间，甚至其垂直大小（当您过度增加或减少大小时变得明显）。

检查DOM，您会发现它实际上呈现了两个表格-一个固定的用于冻结列，一个可滚动的用于其余部分。它试图将它们放置为单个一致的物品，但最终它大多是一个hack。至于修复，很遗憾我不知道任何方法，但由于这比“在Chrome上无法工作”更普遍的问题，我期望插件开发人员最终解决它。

- mgibsonbr

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oleg · Accepted Answer

我无法为您提供这个问题的真正解决方案，但我决定写出我对该问题的解释。简短回答是：在计算冻结 div 的 top 位置时，setFrozenColumns 方法中存在错误。需要改进代码。

有两个 div：一个是冻结表头的 div（具有类frozen-div ui-jqgrid-hdiv），另一个是冻结表体的 div（具有类frozen-bdiv ui-jqgrid-bdiv）。如果您打开官方 jqGrid 示例页面上的“Frozen Cols.Group Header(new)”/“Frozen column with group header”演示并检查不同 Web 浏览器中 top 属性的值，您会发现在某些浏览器中，top 的值应该增加或减少1像素才能获得正确的显示效果。

例如，在 Firefox 16 中，这两个 div 的值分别为top: 24px;和top: 70px;，看起来都很好。

在 IE9 中，这两个 div 的值相同，但为了正确地显示网格，必须将值更改为top: 25px;和top: 71px;。

同样，在 Chrome 22 中，这两个 div 的值为top: 24px;和top: 70px;。为了解决问题，可以将值更改为top: 23px;和top: 69px;。

您可以使用 Chrome（以及 IE 的相同方法）的开发者工具来验证更改top属性是否修复了问题：

在更改后，演示的外观至少在100%下是完美的，但是如果您将缩放比例更改为200％，则会发现原始值top: 24px; 和top: 70px;更好。

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