JQuery UI 对话框 - 更改标题颜色仅部分有效

Question

我正在使用 JQuery UI 的对话框模块，一切正常，并且大部分时间都可以设置样式，但是我无法弄清楚一两个奇怪的地方：

1) 我正在尝试将标题栏的颜色从默认更改为紫色。这是我的 CSS：

.ui-dialog-title {
font-family: 'Andika', sans-serif;
color: #FFFFCC;  
background-color:#330033;
}

.ui-dialog-titlebar {
   background-color:#330033;
}

它工作了一半：字体发生了变化，我在单词后面看到了一个紫色矩形，但该栏的其余部分保持默认颜色。更改 .widget-header 没有帮助。

2) 我正在尝试更改容器边框颜色。这是我的 CSS：

.ui-dialog {
background-color:#330033;
}

又一次成功了——大部分边框变成紫色，但还剩下两条小白线。我已经尝试确保我也更改了调整大小手柄，这使线条变细但并没有完全消除它们。

这是一个屏幕截图，显示了我目前得到的内容：

这是我创建对话框的代码，以防我此时搞砸了（虽然看不到什么）：

//called by 'Demos' button onclick
function demos() {
var $dialog = $('<div id="dialog">Coming Soon</div>');
var $title = "Demos";
dialog($dialog, $title);

....    

function dialog(dialog, title) {
$title = title;
$dialog = dialog;
$dialog.dialog({show: {effect: "blind", duration: 500}}, {title:$title}, {width:700},     
{height:400}, {modal: true});
$dialog.dialog('open');
}

编辑添加：这是带有调用对话框的按钮的 HTML：

<div id="portfolio" class ="grey">
        <b>PORTFOLIO</b>
        <br />
        <div id="buttonHolder">
        <input type="button" class="button" value="Websites" onclick="websites()">
        <input type="button" class="button" value="Apps" onclick="apps()">
        <input type="button" class="button" value="Demos" onclick="demos()">
        <input type="button" class="button" value="Games" onclick="games()">
        <input type="button" class="button" value="Resources" onclick="resources()">
        </div>            
    </div>

编辑以再次添加：如果我删除#dialog div 上的样式，这就是我所拥有的： ？？？

Answer 1

你只需要改变这个：

.ui-dialog { background-color:#330033; }

到：

.ui-dialog { background:#330033; }