jQuery UI对话框标题栏太高

jQuery UI对话框标题栏太高,jquery,jquery-ui,jquery-ui-dialog,Jquery,Jquery Ui,Jquery Ui Dialog,我正在使用jQueryUI对话框在我的一个页面上弹出一些补充信息。出于某种原因,在Chrome11和Firefox4中,标题栏高得离谱。出于某种原因,在IE9中它是可以的。下面是它的屏幕截图: 我尝试过手动设置标题栏的高度,这只会调整标题栏的彩色区域大小,但不会调整标题文本或段落文本的位置。在ChromeDeveloper工具中进行检查,没有发现可能导致此问题的奇怪边距或填充。有人知道是什么导致了这一切吗?下面我已经包含了这个对话框的脚本和标记。据我所知,这个对话框没有应用特殊的CSS(除了标

我正在使用jQueryUI对话框在我的一个页面上弹出一些补充信息。出于某种原因,在Chrome11和Firefox4中,标题栏高得离谱。出于某种原因,在IE9中它是可以的。下面是它的屏幕截图:

我尝试过手动设置标题栏的高度,这只会调整标题栏的彩色区域大小,但不会调整标题文本或段落文本的位置。在ChromeDeveloper工具中进行检查,没有发现可能导致此问题的奇怪边距或填充。有人知道是什么导致了这一切吗?下面我已经包含了这个对话框的脚本和标记。据我所知,这个对话框没有应用特殊的CSS(除了标准的jQueryUI CSS),如果有问题,我使用的是ASP.Net/C#和jQueryUI 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-->

如果您有任何可行的修复建议,我们将不胜感激。

您可以随时使用以下样式:

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

我想补充一点,我测试了FF4.01和Chrome 11,您的代码对我很有效,请参见

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

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

...
这可能是因为您存在级联样式问题。我使用Chrome的开发工具来追踪这些问题。您可以隔离jQuery ui生成的title元素,并检查它继承的类。

添加以下内容:

position:absolute;
overflow:hidden

要分类
.ui对话框
:)

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

.ui-dialog { clear: both; }

是的,我已经试过了,结果出现了一个不同的问题,正如我在问题中提到的。这是手动设置高度时的外观:。我怀疑有一些奇怪的CSS问题正在发生,但我不知道它是什么。如果你注释掉除了jQuery UI的CSS之外的所有其他样式表,看看是jQuery UI还是你。我不知道该说什么,除了演示似乎有效,手动和不手动设置高度。信不信由你,你的建议很有帮助。我把问题缩小到一个
float:left。我不知道为什么会出现这个问题,但是移除它解决了这个问题。我会接受你的回答,因为你让我走上了正确的道路。我为你的吹毛求疵道歉,但是双斜杠的评论是无效的。除此之外,这是一个完美的解决方案。我也遇到了同样的问题,而且页脚元素中也留下了一个浮点。我的css文本上有“position:relative”和float:left。刚把浮子移到左边,一切都很顺利。我还编辑了custom.css文件,并一次删除了元素块以确定问题。干杯不,那不好。我已经检查了对话框中涉及的每个元素,但我看不到任何可能导致此问题的因素。使用开发工具检查该元素,然后点击计算样式。这将向你展示一张精美的图片,详细说明高度、填充、边框或边距是否有偏差。然后向下滚动样式,查看问题样式在哪里发挥作用。
.ui-dialog { clear: both; }