4

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

在此处输入图像描述

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

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

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

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

4

2 回答 2

4

我不能建议你真正解决这个问题,但我决定写下我如何解释这个问题。简短的回答是:setFrozenColumns方法在计算top冻结 div 的位置时存在错误。应该改进代码。

有两个 div:一个用于冻结的标头(具有 classes 的 div frozen-div ui-jqgrid-hdiv),另一个用于冻结的主体(具有 classes 的 div frozen-bdiv ui-jqgrid-bdiv)。如果您从官方 jqGrid 演示页面打开“Frozen Cols.Group Header(new)”/“Frozen column with group header”演示并检查top不同 Web 浏览器中的属性值,您会发现在某些浏览器中的值top应该增加或减少到 1px 以获得正确的视图。

例如,在 Firefox 16 中,潜水具有top: 24px;并且top: 70px;看起来一切正常。

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

top: 24px;以同样的方式,在 Chrome 22 中具有相同的值top: 70px;。要解决此问题,可以将值更改为top: 23px;top: 69px;

您可以使用 Chrome 的开发者工具(IE 也一样)来验证更改top属性是否可以解决问题:

在此处输入图像描述

更改后,演示的外观至少在 100% 时是完美的,但如果您将缩放更改为 200%,您会看到原始top: 24px;并且top: 70px;更好。

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

于 2012-10-18T20:43:13.823 回答
2

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

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

于 2012-10-12T16:37:24.857 回答