JQuery UI Dialog Titlebar слишком высокий

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 { clear: both; }

Answer 2

Вы всегда можете оформить его с помощью:

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

Я бы добавил, что я тестировал FF4.01 и Chrome 11, и ваш код работает на меня, см. работает jsFiddleдемо .

Answer 3

Добавьте это:

position:absolute;
overflow:hidden

в класс .ui-dialog:)

Answer 4

Я не знаю, имеет ли это значение, но вы можете попробовать использовать атрибут title прямо в вашем div вместо установки его в коде:

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

Возможно, у вас проблема с каскадным стилем. Я использую инструменты разработчика Chrome для отслеживания подобных проблем. Вы можете изолировать элемент title, сгенерированный jQuery-ui, и проверить классы, которые он унаследовал.