2

これと同様の問題があります。jQueryUI タブを使用してページのコンテンツを制御しており、一部のタブでは jqGrid を使用して情報を表示しています。jqGrid のフォント設定は、タブで定義された大きなフォントによって上書きされています。その例の解決策は、タブをクラスとして定義することでしたui-jqgrid。しかし、彼らはタブの下にグリッド以外何も持っていなかったので、その解決策はうまくいきました. グリッドのみのフォント設定を上書きし、jqGrid が独自のフォント設定を使用できるようにするにはどうすればよいですか?ただし、タブの下の他のすべての設定は保持します。

ここで、jqGrid のフォント サイズを上書きしている場所を確認できます。パーセンテージも使用してみましたが、それも無視されました。

CSS 値

更新 - CSS 計算スタイル: ここに画像の説明を入力

4

1 に答える 1

3

問題を解決する方法はたくさんあります。ここで説明されている方法が機能することを確認する方法はありますが、他のテキストに11px望ましくないフォントが表示されます。

フォントの問題はCSSの設定（こちらを参照）

.ui-widget .ui-widget { font-size: 1em; }

Tab と jqGrid の両方にクラスがあるため"ui-widget"、設定によって jqGrid.css のフォント設定が上書きされます (こちらを参照)。

.ui-jqgrid {position: relative; font-size:11px;}

その結果、デモのような写真が得られます:

ここに画像の説明を入力

jQuery UI はemスタイルを使用します。たとえば、ページの CSS に次の内容を含めることができます。

html, body { font-size: 75% }

（ここを参照）。この場合、次の結果が得られます (デモを参照)。

ここに画像の説明を入力

ところで、jqGrid のドキュメントは間接的に示唆しています (HTML ページの例はこちら)。ページ上の他のフォントのサイズを変更したくない場合があることを理解しています。

たとえば、使用できる場合

.ui-jqgrid { font-size: 11px !important; }

または代わりに次の

.ui-jqgrid .ui-jqgrid-view { font-size: 11px; }
.ui-jqgrid .ui-jqgrid-pager { font-size: 11px; }
.ui-jqgrid .loading { font-size: 11px; }

次のデモで見ることができるアプローチの結果:

ここに画像の説明を入力

あなたが正しいと私が理解しているなら、それはあなたが望んでいる結果です。

更新: Chrome の開発者ツールを使用すると、IE 開発者ツールと同じ情報を表示して、font-sizejqGrid を上書きする CSS スタイルを見つけることができます。たとえば、私の最初のデモでは、

ここに画像の説明を入力

したがって、アプリケーションで上記の提案が機能しない場合は、グリッド セルに適用される有効な CSS スタイルを調べ、jqGrid の CSS を上書きする CSS 設定を見つける必要があります。

UPDATED 2 : あなたが電子メールで私に送ったリンクから、<!DOCTYPE html ...>以前に宣言を含めるのを忘れていたため、問題が存在することがわかりました<html>。そのため、Web ブラウザは、HTML 3.2 が公開される前 (1997 年より前) に記述された非常に古いスタイルの HTML としてページを解釈します。いわゆる個性モードです。

<html>問題を解決するには、次のような行の前に含める必要があります

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

あるいは単に

<!DOCTYPE html>

(HTML5 標準)。さらに、 http://validator.w3.org/のような HTML valirador で HTML ページを検証することを強くお勧めします。現在のコードは、HTML と XHTML が混在していて、良くありません。

更新 2 : の場合に jqGrid の作成を停止することを提案する機能要求を追加で投稿しました。document.documentMode <= 5<!DOCTYPE html ...>

更新 3 : 質問/回答に基づいて、trirand に 2 つの提案を投稿しました: thisとthis。両方の提案が受け入れられ、現在は jqGrid の一部になっています (こちらとこちらを参照)。したがって、次のバージョンのユーザーには、説明されている問題は発生しないはずです。

于 2012-06-07T17:14:38.230 に答える