0

我们正在使用引导程序，并且我有一个页面，在该页面上，我使用小按钮得到了相互冲突的结果。

我有一些看起来像这样的按钮：

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

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

当我查看 Firebug 中的“Computed”样式时，它显示.btn正在被应用，但.btn-small对于我检查过的每个属性都有一条线穿过它，这意味着它没有被使用。

在此处输入图像描述

小按钮的行高为 15px，但正常尺寸的行高为 20px。真正奇怪的是，即使小按钮的行高计算属性是 15px，当我展开它以查看它的来源时，它显示.btn应用了 20px 值（见图）。

按钮行高属性

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

4

2 回答 2

0

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

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

于 2013-07-09T17:31:02.827 回答
-1

我能够找到问题所在。我最初排除了 jQuery-UI 交互，因为我无法使用 jQuery-UI 在 jsFiddle 中重现它。我没有提到但事实证明是相关的是，我们也在使用 Infragistics Ignite 工具集。Ignite 基于 jQuery-UI。该对话框正在获取 .ui-widget 类（我专注于按钮的类），这导致 ignite 在按钮中设置字体大小，然后破坏了 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}

很抱歉没有提供所有相关信息。只是不认为基础设施是一个可能的原因，因为我没有直接在该页面上使用他们的任何东西。

于 2013-07-09T19:17:16.143 回答