jQuery UI对话标题栏太高了

Question

我正在使用jQuery UI对话框在我的某个页面上弹出一些补充信息。出于某种原因，在Chrome 11和Firefox 4中，标题栏非常高。出于某种原因，它在IE 9中是可以的。这是一个截图：

我尝试手动设置标题栏的高度，只调整标题栏的彩色区域，但不调整标题文本或段落文本的位置。在Chrome开发人员工具中进行检查显示没有可能导致此问题的奇怪边距或填充。任何人都知道可能导致这种情况的原因是什么？下面我已经包含了此对话框的脚本和标记。据我所知，没有特殊的CSS应用于这个对话框（除了标准的jQueryUI CSS）如果它很重要，我使用ASP.Net/C#与jQuery 1.5.2和jQueryUI 1.8.12。

ASP / HTML：

<!-- ssn -->
<div class="input-block">
    <asp:Label ID="lblSsn" runat="server" CssClass="input-label" AssociatedControlID="tbSsn">Social Security Number (<a id="show-ssn-disclosure" href="#">More Info</a>)</asp:Label>
    <asp:TextBox ID="tbSsn" runat="server" CssClass="input" />
    <div id="ssn-disclosure-text">
        <p>SSN disclosure is <strong>highly recommended</strong> if you have one. The University is required by federal law to report your SSN and other pertinent information
        to the Internal Revenue Service pursuant to the reporting requirements imposed by the Taxpayer Relief Act of 1997. The University will use the SSN you provide to
        verify the identity of each applicant, to link to the Payroll Office to verify amounts paid to students receiving teaching assistantships and research assistantships,
        and to link financial awards and admission data to registration histories and student records. This record-keeping system was established before January 1, 1975,
        pursuant to the authority of the Regents of the University of California under Article IX, Section 9 of the Constitution of the State of California. This notification
        is provided to you as required by the Federal Privacy Act of 1974.</p>
    </div>
</div><!--/input-block-->

脚本：

$(function() {
    //hide ssn disclosure dialog box
    var $ssnDialog = $('#ssn-disclosure-text').hide().dialog({
        autoOpen: false,
        resizable: false,
        modal: true,
    width: 500,
    title: 'SSN Disclosure'
    });

    //binding for ssn disclosure dialog
    $('#show-ssn-disclosure').click(function(e) {
        e.preventDefault();
        $ssnDialog.dialog('open');
    });
});

非常感谢任何可行的修复建议。

Answer 1

您始终可以使用以下方式设置样式：

.ui-dialog .ui-dialog-titlebar 
{
    height: 40px; /* or whatever you want */
}

我想补充一点，我测试了FF4.01和Chrome 11，您的代码适用于我，请参阅 working jsFiddle demo 。

Answer 2

只需将以下属性添加到对话框的父类，即可解决此对话框标题问题

.ui-dialog { clear: both; }

Answer 3

添加：

position:absolute;
overflow:hidden

到班级.ui-dialog：）

Answer 4

我不知道它是否有所作为，但您可以尝试直接在div上使用title属性，而不是在代码中设置它：

<div id="dialog-form" title="Dialog Title" style="display:none;">
   ...
</div>

可能是您有级联风格问题。我使用Chrome的开发人员工具来跟踪这些问题。您可以隔离jQuery-ui生成的title元素，并检查它继承的类。