未使用CSS類

我們使用引導程序，並且我有一個頁面，其中使用小按鈕獲得衝突結果。未使用CSS類

我有很多按鈕，看起來像這樣的：

<input type="button" class="btn btn-small" value="Save"... />

我有我的主要形式，然後被用於jQuery的對話框一些div。在主窗體中，按鈕顯示的很小，但在對話框中，按鈕顯示爲常規大小，即使在所有情況下，我都使用<input type="button"和class="btn btn-small"。唯一的區別是包含它們的div，所以我猜測它與在按鈕上方某處應用的樣式有關。

當我查看Firebug中的「Computed」風格時，它顯示.btn正在應用，但.btn-small對我檢查過的每個屬性都有一條線，這意味着它沒有被使用。

enter image description here

小按鈕具有的15像素的線的高度，但在正常尺寸具有20像素的行高。真正奇怪的是，儘管小按鈕的線高度的計算屬性爲15px，但當我擴展它以查看它來自何處時，它顯示.btn應用了20px值（請參見圖片）。

button line height property

底線是，我真的不知道是什麼導致它。我假設它是圍繞它的衆多div中的一種。我的主要問題很明顯，我該如何解決這個問題，但在更一般的層面上，什麼會導致.btn-small風格不能被使用？

來源

2013-07-09 Pete

任何機會，你可以在jsfiddle.net創建一個工作的例子或提供一個鏈接到實際的網站？ –

「暗示它沒有被使用。」通常這意味着風格在某處被另一個規則覆蓋，而不是被忽略或不被使用。 – j08691

'btn'和'btn-small'是否都聲明瞭行高？嘗試從'btn'中刪除它。如果您沒有縮小的CSS文件進行開發，這也更容易。 – jalynn2

-1

我能夠追查到這個問題。我最初排除了jQuery-UI交互，因爲我無法使用jQuery-UI在jsFiddle中重現它。我沒有提到並且結果相關的是，我們也在使用Infragistics Ignite工具集。 Ignite基於jQuery-UI。該對話框得到.ui-widget類（我專注於按鈕的類），並導致點擊設置按鈕的字體大小，然後打破Bootstrap大小。

爲了解決這個問題，我刪除從infragistic的.css文件中的以下行：

.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family:"Segoe UI",Arial,sans-serif;font-size:1em}

對不起，不提供所有相關信息。只是沒有想到infragistics是一個可能的原因，因爲我沒有直接在頁面上使用他們的任何東西。

來源

2013-07-09 19:17:16 Pete

HTML元素可以通過列出class屬性中的類來分配多個類，並用空格分隔它們，但是如果在兩個規則中聲明瞭相同的屬性，衝突將首先通過特定來解決，然後根據CSS聲明的順序。類屬性中的類的順序不相關。 [從mozilla常見css問題轉述]

您有兩個類修改相同的屬性，所以瀏覽器正確地只應用一個。

來源

2013-07-09 17:31:02 VoronoiPotato

但是這忽略了在同一頁面內兩個相同的按鈕應用不同樣式的說法。 –

您可能有一個父類div或容器，它們也有類或默認樣式，這與上面兩個類有衝突。分享更多的代碼，讓我們看看:)。 – VoronoiPotato

我知道CSS樣式是如何工作的。根據Bootstrap文檔（http://twitter.github.io/bootstrap/base-css.html#buttons），您可以通過爲按鈕提供「btn」和「btn-small」類來創建一個小按鈕，所以我假設他們的風格沒有任何意圖衝突。我相當肯定這與按鈕上方的div有關，而不是按鈕樣式本身。否則，這將是一個相當常見的自舉投訴。 – Pete

回答

相關問題