jquery - 为什么 jGrowl 弹出窗口看起来不像预期的那样？

Question

我在我的网站上收到此 jGrowl 通知，当通知框弹出的 jGrowl 弹出窗口看起来样式不太好时。

这就是我调用 jgrowl 文件的方式

<link rel="stylesheet" type="text/css" href="./include/jgrowl/jquery.jgrowl.css" />

这是通知框

alt text http://hinuts.com/jgrowl.look.png

Answer 1

如果您在与 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;
}