如何找到我的CSS和JQuery UI CSS之間的衝突？

即時通訊使用我的網站上的JQuery UI，例如按鈕。似乎我的樣式表與JQuery UI CSS有關，因爲按鈕字體太大。我怎樣才能找出造成問題的原因？我在FF 4.0上安裝了Firebug 1.7，但是我發現它主要是使用來自和從我的樣式表JUI CSS只是一些派生的樣式，不應該影響按鈕的字體大小。有人可以幫助如何使按鈕看起來像他們應該？如何找到我的CSS和JQuery UI CSS之間的衝突？

測試頁：http://kangurek24.pl/test/loginform.jsp.htm

來源

2011-04-04 Robert Niestroj

螢火蟲應該顯示在風格的來源。它說什麼？屏幕截圖？ – corroded 2011-04-04 15:42:07

jQuery UI.css第59行.ui-widget設置了em字體大小 – Alex 2011-04-04 15:43:31

我認爲這是因爲UI使用EM。我不熟悉CSS，但如果我理解正確，EM值往往取決於當前正常的字體大小。 – JohnP 2011-04-04 15:46:23

的font-size: 18px;來自對jquery-ui.css 59行的jQuery UI的CSS規則。

.ui-widget { 
    /* snip */ 
    font-size: 1.1em; 
}

默認的字體大小是16px，而1.1 * 16 = 17.6 ≅ 18。

爲了給按鍵相同的字體大小的文本的其餘部分，添加此規則到您的自定義CSS：

.ui-button { 
    font-size: .91em; /* ≅ 1/1.1 */ 
}

確保您的自定義CSS來了jQuery UI的CSS之後。

來源

2011-04-04 15:43:22

您可以在自己的樣式表與此改變它：

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

（或任何你想要的字體大小 - 要小心，因爲這可能會影響已應用的.ui-widget類的其他元素。）

添加一個ID，選擇的前給了它較高的特異性，這條規則勝於jQuery的。

接下來，作爲小費，我會刪除字體大小：100％來自於style.css的mainouter，（24行）--IT是給你的H2一個非常小的字體。

一般情況下，我不上塊容器指定字體大小，特別是與相對字體大小（百分比和EMS），因爲它是難以管理的繼承。

來源

2011-04-04 16:17:40 Faust

第24行沒有字體大小。你的意思是哪一行？ – 2011-04-04 16:48:14

@Robert：對不起，我必須有誤讀螢火蟲（相當嚴重），這似乎是通過你的CSS重置代碼（聲明開始於第24行）默認應用上的一切，而不是直接對mainouter。這是一個很好的方法 - 只要確保重新定義像H1這樣的字體大小。 – Faust 2011-04-04 17:45:38

如何找到我的CSS和JQuery UI CSS之間的衝突？

回答

相關問題