jquery - 为什么 MVC 4 基本 CSS 会顶起 jquery-ui 的对话框？

Question

任何 css 忍者都可能猜到为什么当我在元素中包含 MVC 4 的基本 css 文件时会导致 Jquery UI 的对话框出现问题？标题栏出现在内容旁边，当然一切都被塞住了 - 不用说，它看起来不太好。

我不是 HTML 忍者，但似乎有什么东西导致了“float: left”或类似的东西，尽管我可以在 HTML 中(使用 firebug)看到“display: block;”

嗯 - 这是我正在使用的 HTML 和 JS，但我不知道它真的有帮助。

        $("#addCompanyDialog").dialog({
            title: "Add New Company",
            autoOpen: false
        });

        $("#addCompanyLink").click(function (evt) {
            evt.preventDefault();
            $("#addCompanyDialog").dialog("open");
        }); 

<div id="addCompanyDialog" style="display:none; background-color: yellow; ">
    <input type="text" id="companyName"/>
    <input type="submit" id="addCompany" value="Add Company"/>
</div>

如果我注释掉这一行

@Styles.Render("~/Content/css")

对话框恢复正常，即文本框和按钮上方的标题栏。

谢谢

Answer 1

我找到了它 - 他们覆盖了其中的一些 jquery-ui 内容。这是 CSS 中令人反感的部分

.ui-dialog-titlebar {
    color: inherit;
    font-weight: inherit;
    border: 0 none;
    background: none;
   /* float: right;*/    
}

我一直在搜索 div，实际上搜索了“float”，但昨晚错过了这个，我认为它值得寻找，因为它是一个非常好的 CSS 模板，所以也许这会对其他人有所帮助。

甜甜的!