こんにちは、chrome(v22) と firefox の間で jqgrid の固定列のデモにアライメントの違いが見られます。なぜそれが起こっているのか、そしてそれに対する修正は何か教えてください。
スクリーンショットを見ると、client 列と Amount 列の間で水平方向の配置が若干異なることがわかります。
以下のリンクで同じことをライブで見ることができます: http://www.trirand.com/blog/jqgrid/jqgrid.html
上記のリンクを開き、最後のセクション、つまり固定列グループ ヘッダーに移動します。次に、Windows XP の chrome(v22) ブラウザーで、凍結された列のデモまたは凍結された列グループ ヘッダーのデモを選択します。
ただし、windows XP の firefox(v15) と safari(v5) では位置合わせは適切でした。
問題の本当の解決策を提案することはできませんが、問題をどのように解釈するかを書くことにしました。簡単な答えは次のとおりです。凍結されたdivの位置の計算にsetFrozenColumnsメソッドにバグがあります。topコードを改善する必要があります。
2つのdivがあります。1つはフリーズヘッダー用（divはクラスを持っていますfrozen-div ui-jqgrid-hdiv）、もう1つはフリーズボディ用（divはクラスを持っていますfrozen-bdiv ui-jqgrid-bdiv）です。公式のjqGridデモページから「FrozenCols.GroupHeader（new）」/「Frozencolumn with group header」デモを開きtop、さまざまなWebブラウザーで属性の値を調べると、一部のブラウザーでtopは、正しく表示するには、1pxに増減します。
たとえば、Firefox 16では、ダイビングはtop: 24px;すべてtop: 70px;問題ないように見えます。
IE9では1つは同じ値ですが、グリッドを正しく表示するには、値をtop: 25px;とに変更する必要があります。top: 71px;
同じように、Chrome 22でも同じ値top: 24px;になりtop: 70px;ます。問題を解決するには、値をtop: 23px;とに変更します。top: 69px;
Chromeの開発者ツール（およびIEの場合も同じ）を使用して、top属性を変更すると問題が解決することを確認できます。
変更後、デモの外観は少なくとも100％で完璧になりますが、ズームを200％に変更すると、元の値が表示され、より良くなります。top: 24px;top: 70px;
問題の本当の解決は簡単ではないと思います。グリッドのフリーズされた部分のすべての行とフリーズされていない部分のすべての行に高さ属性を設定する方向に進みます。答えには、その方向への第一歩があります。欠点は、編集後に行の正しい高さを再計算するために追加のコードが必要になることです。
フォント サイズを増減すると、すべてのブラウザで配置が正しくなる場合もあれば、正しくない場合もあります。Chrome でのみデフォルトのサイズが間違っているのは事実ですが、他のすべて (Firefox、Opera、Safari、Internet Explorer) は正しく起動しますが、サイズを変更すると、それらすべてが調整/誤調整される可能性があります。また、垂直方向の配置だけでなく、固定された列と残りの列の間の水平方向のスペース、さらには垂直方向のサイズなど、他のものも見苦しくなります (増減しすぎると明らかになります)。
DOM を調べると、実際には 2 つのテーブルがレンダリングされていることがわかります。1 つは固定された列用で、もう 1 つはスクロール可能な残りの列です。それらを単一の一貫したものに見えるように配置しようとしますが、最終的にはほとんどハックです。修正については、残念ながら私にはわかりませんが、「Chrome で動作しない」というよりもはるかに一般的な問題であるため、プラグインの開発者が最終的に修正することを期待しています。