jqGrid字體設置被jQueryUI標籤設置覆蓋

我有一個類似的問題this one。我正在使用jQueryUI選項卡來控制頁面上的內容，並在一些選項卡上使用jqGrid來顯示信息。 jqGrid的字體設置正在被選項卡定義的較大字體覆蓋。該示例中的解決方案是將該選項卡定義爲類ui-jqgrid。但他們沒有任何東西，除了他們標籤下的網格，所以解決方案的工作。如何覆蓋網格的字體設置，並允許jqGrid使用自己的字體設置，但保留其他設置下的所有其他設置？jqGrid字體設置被jQueryUI標籤設置覆蓋

你可以在這裏看到它覆蓋了我的jqGrid字體大小。我也嘗試使用百分比，但它也忽略了這一點。

CSS Calues

更新 - CSS計算樣式： enter image description here

來源

2012-06-07 Dave

有很多方法來解決這個問題。如何確認here所描述的工作方式，但是會讓其他文本具有不需要的11px字體。

與字體的問題是CSS設置（參見here）

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

由於Tab和的jqGrid都具有類"ui-widget"設定從jqGrid.css（見here）覆蓋字體設置：

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

其結果是你有圖片像the demo：

enter image description here

jQuery UI使用em樣式。因此，您可以在您的頁面的CSS中包含以下內容

html, body { font-size: 75% }

（請參閱here）。在這種情況下，你將有如下結果（見the demo）：

enter image description here

順便說jqGrid的的文檔間接建議（見例如here 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; }

這種方法的結果，你可以在the next demo看到：

enter image description here

如果我理解你糾正它是你想要的結果。

已更新：如果您使用Chrome的開發工具，則可以看到與IE Developer Tools中相同的信息，以查找覆蓋jqGrid的font-size的CSS樣式。例如，在my first demo你會看到

enter image description here

因此，如果您的應用程序我的上述建議沒有工作，你應該檢查應用。查閱全文任何網格單元有效的CSS樣式，並找到其CSS設置的jqGrid的覆蓋CSS。

更新2：從你給我每封郵件，我可以看到問題存在，因爲你忘了<html>之前，包括任何<!DOCTYPE html ...>聲明的鏈接。因此，Web瀏覽器將您的頁面解釋爲在HTML 3.2發佈之前（1997年之前）編寫的非常舊的HTML格式。它的名字叫做Quirks mode。

爲了解決這個問題，你<html>前行應該包括像

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

或只是

<!DOCTYPE html>

（HTML5標準）。此外，我強烈建議您在一些HTML頁面中驗證您的HTML頁面，如http://validator.w3.org/。您目前的代碼是HTML和XHTML之間的混合，並不好。

更新2：我還the feature request張貼在我建議停止的jqGrid的創造的document.documentMode <= 5情況，所以在使用Quirks mode的情況下（無<!DOCTYPE html ...>）。

已更新3：基於問題/答案，我發佈了兩條建議，分別爲：this和this。這兩個建議都被接受，現在是jqGrid的一部分（請參閱here和here）。所以下一個版本的用戶應該沒有描述的問題。

來源

2012-06-07 17:14:38 Oleg

這正是我所期待的。但是當我嘗試'.ui-jqgrid {position：relative; font-size：11px！important;}'它只是改變了標題的字體大小。表中的數據和導航欄中的數據都很大。我嘗試了您的替代方案，但似乎也沒有效果。 – Dave

@Dave：原因可能只有**你多使用一個CSS **。只需使用F12打開IE開發人員工具。選擇「HTML」標籤。按刷新（F5）加載頁面數據。按下Ctrl-B或使用「查找」菜單，然後選擇網格的任何單元格。在右側部分滾動樣式並找到其中'font-size'仍處於活動狀態的CSS樣式。這是在你的情況下解決問題的CSS。在我的演示中，它將是'.ui-widget .ui-widget {font-size：1em; }就像我在我的回答中所描述的那樣。 – Oleg

我明白了。我似乎無法弄清楚的是如何爲jqGrid覆蓋該值，但是對於整個jqGrid。你的答案關於使用'！important'在你的第三個例子中是完美的，那就是我正在尋找的東西。但是當我這樣做時，它只是用正確的字體大小格式化表格的標題。 – Dave

jqGrid字體設置被jQueryUI標籤設置覆蓋

回答

相關問題