没有使用CSS类

Question

我们正在使用bootstrap，我有一个页面，我用小按钮得到了相互矛盾的结果。

我有许多按钮，如下所示：

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

我有我的主窗体，然后是一些用于jQuery对话框的div。在主窗体上，按钮显示为小，但在对话框中，按钮显示常规尺寸，即使在所有情况下，我都使用<input type="button"和class="btn btn-small"。唯一的区别是包含它们的div，所以我猜它与应用在按钮上方的样式有关。

当我查看Firebug中的“Computed”样式时，它显示正在应用.btn，但.btn-small为我检查过的每个已列出的属性都有一条线，暗示它是没有被使用。

小按钮的线高为15px，但正常尺寸的线高为20px。真正奇怪的是，即使小按钮的行高度的计算属性为15px，当我展开它以查看它来自何处时，它会显示.btn，其值为20px（见图）。 / p>

底线是我真的不确定是什么导致了它。我假设它是围绕它的众多div之一的一些风格。我的主要问题显然是如何解决这个问题，但在更一般的层面上，会导致.btn-small样式不被使用？

Answer 1

HTML元素可以通过在类属性中列出类来分配多个类，并使用空格来分隔它们，但是如果在两个规则中声明了相同的属性，则首先通过特异性解决冲突，然后根据顺序CSS声明。 class属性中的类顺序不相关。 [从mozilla常见问题解释]

您有两个类修改相同的属性，因此浏览器只应用一个。

Answer 2

我能够找到问题所在。我最初排除了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是一个可能的原因，因为我没有直接在该页面上使用他们的任何东西。