我在我的网站上收到了这个 jGrowl 通知，当通知框弹出的 jGrowl 弹出窗口看起来样式不好时。
这就是我调用 jgrowl 文件的方式
<link rel="stylesheet" type="text/css" href="./include/jgrowl/jquery.jgrowl.css" />
这是通知框
【问题讨论】：
如果您在与 jGrowl 相同的页面上引用 jQuery UI 的样式表，jGrowl 容器的样式将受到影响。 As of jGrowl version 1.2.2 所有的 jGrowl 容器都用 CSS 类“ui-state-highlight”装饰，它为样式定义添加了背景、边框和字体颜色。
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
background:url("images/ui-bg_glass_55_fbf9ee_1x400.png") repeat-x scroll 50% 50% #FBF9EE;
border:1px solid #FCEFA1;
color:#363636;
}
为了防止这种行为，您可以在 jquery.jgrowl.css 文件中添加以下内容：
div.jGrowl > .ui-state-highlight {
background: inherit;
color: inherit;
border: inherit;
}
【讨论】：
在 Firebug 或您的 CSS 文件中，添加 !important 声明（例如 background-color: red !important; ）并查看您的样式是否应用正确。如果是这样，您的规则将被带有 higher specificity 的规则覆盖（或在您的规则之后应用的具有相同特异性的规则）。
编辑：我创建了一个 jGrowl 测试页面，它的通知显示正确。尝试在您的脑海中注释掉任何其他样式表，看看问题是否仍然存在。此外，请确保文件位于指定的目录中。 （./ 是多余的，不需要：. 表示当前目录，因此引用./folder/test.js 与仅folder/test.js 相同）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="jquery.jgrowl.css" type="text/css" />
<link rel="stylesheet" href="examples/css/redmond/jquery-ui-1.7.2.custom.css" type="text/css" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="examples/jquery.ui.all.js"></script>
<script type="text/javascript" src="jquery.jgrowl.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.jGrowl( "jGowl test", { sticky: true } );
});
</script>
</head>
<body>
</body>
</html>
【讨论】：
使用 firebug 检查应用于弹出框的 css。可能某些 css 被您自己编写的 css 覆盖了。
【讨论】：
我认为 jquery-ui-1.7.2.custom.css 正在向您的 jgrowl 通知对象添加样式类。我不擅长调试 css，所以我还没有弄清楚如何修复它。尝试注释掉 jquery-ui-1.7.2.custom.css 链接，看看这是否会使您的 jgrowl 通知看起来像您期望的那样。
【讨论】：