javascript - 仅在 Facebook 中具有无限扩展高度的对话框叠加层

Question

我认为这是一个 !important 问题。我有一个带有这样设置叠加层的对话框:

.ui-widget-overlay 
{
    width: 518px !important;
}

overlay 的高度将根据页面大小在我的 Javascript 中设置(它可以是两种大小之一)

        if (!placeHolderVisibility) {
            //Code

            $('.ui-widget-overlay').addClass('overlayLarge');
        } else {
            //Code

            $('.ui-widget-overlay').addClass('overlaySmall');
        }

这是 overlaySmall 和 overlayLarge 的 css:

.overlaySmall
{
    height: 985px !important;
}

.overlayLarge
{
    height: 1167px !important;
}

我有其他带有对话框的页面，但它们没有问题。

.ui-widget-overlay 
{
    height: 413px !important;
    width: 510px !important;
}

当我尝试检查 firebug 中的叠加层时，我注意到 !important 不在 css 中，但我无法获得初始高度(它扩展得很快)

编辑 我认为这是 facebook 的自动调整大小问题

FB.init({ appId: appid, status: true, cookie: true, xfbml: true });
        FB.Canvas.setAutoResize(); //<-- Something wrong with this maybe??

有什么建议吗？

Answer 1

应 OP 的要求复制粘贴:

Why are you using !important? It's generally a bad idea with better alternatives.

You just need to use a more-specific CSS selector than the jQuery one, or use the exact same selector but make sure that your CSS comes after jQuery's. Using !important breaks the natural cascading of CSS and makes maintenance much harder (as you're experiencing firsthand).