jQuery UI对话框标题栏过高。

Question

我正在使用jQuery UI对话框在我的页面上弹出一些补充信息。但在Chrome 11和Firefox 4中，标题栏过高，这看起来非常不合适。而在IE 9中却没有问题。这是它的截图：

我尝试手动设置标题栏的高度，但只改变了标题栏的颜色区域大小，并未调整标题文本或段落文本的位置。在Chrome开发者工具中检查也没有发现奇怪的边距或填充可能引起此问题。有谁知道是什么原因引起的吗？以下是此对话框的脚本和标记。据我所知，除了标准的jQueryUI CSS之外，没有应用特殊的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');
    });
});

任何可行的修复建议将不胜感激。

- Ender

Answer 1

您可以始终使用以下方式对其进行样式设置：

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

我想补充一点，我测试了FF4.01和Chrome 11，你的代码对我来说是可行的，可以看到这个可运行的jsFiddle演示。

- Code Maverick

---

是的，我尝试过了，但结果出现了另一个问题，就像我在问题中所指出的那样。这是如果我手动设置高度的样子：http://i.imgur.com/R6VI6.png。我怀疑这是一些奇怪的CSS问题，但我不知道是什么。 - Ender

如果你注释掉除jQuery UI的css之外的所有其他样式表，看看是jQuery UI还是你的问题。我不知道该说什么，除了演示似乎可以正常工作，手动设置高度或不设置高度都可以。 - Code Maverick

信不信由你，你的建议起到了作用。我将问题缩小到页脚样式中的float:left;。我不知道为什么这会导致问题，但是删除它解决了这个问题。我将接受你的答案，因为你帮助我找到了正确的方向。 - Ender

抱歉挑剔一下，但是双斜杠注释不是有效的CSS语法。除此之外，这是一个完美的解决方案。 - Glenn Barnett

我曾经遇到过同样的问题，它是由于页脚元素中的float left引起的。我的css文本中有"position:relative"和float:left。只需删除float left，一切就都顺利了。我还编辑了我的custom.css文件，并逐个删除元素块以确定问题所在。干杯！ - MrWater

Answer 2

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

.ui-dialog { clear: both; }

- Soundar

Answer 3

Add this :

position:absolute;
overflow:hidden

针对 class .ui-dialog :)

- user2283277

Answer 4

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

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

可能是你有一个层叠样式表的问题。我使用Chrome开发者工具解决这些问题。你可以隔离由jQuery-ui生成的标题元素并检查它所继承的类。

- camainc

---

不，那不行。我检查了对话框中涉及的每个元素，我找不到任何可能引起这个问题的原因。 - Ender

使用开发者工具检查该元素，然后点击“计算样式”。这将显示一个漂亮的图片，详细说明是高度、填充、边框还是外边距出了问题。然后向下滚动样式，看看哪个样式出了问题。 - Nick