jQuery UI 对话框标题栏太高

2024-04-11

我正在使用 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-->

Script:

$(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');
    });
});

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


您始终可以使用以下样式来设计它:

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

我想补充一点,我测试了 FF4.01 和 Chrome 11,你的代码对我有用,请参阅工作 jsFiddle 演示 http://jsfiddle.net/CodeMaverick/7We75/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery UI 对话框标题栏太高 的相关文章

随机推荐