如何找到我的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之间的冲突？

回答

相关问题